Scorrimento infinito (scrolling): pro e contro. Scorrimento infinito delle pagine: aiuta o danneggia

11.08.2019 finestre8

UN! Suddividere il contenuto in pagine con numeri è uno schema di impaginazione classico, intuitivo e familiare agli utenti. Tuttavia, ultimamente sempre più siti stanno iniziando a “mettere in pratica” questo tipo di navigazione delle pagine come l’Infinite Scroll. Anche giganti come Google, Facebook e VKontakte non hanno fatto eccezione. Naturalmente questo tipo di impaginazione ha i suoi pro e i suoi contro, ma questo è un altro discorso. In questo tutorial vedremo come implementare tale navigazione.

Come funziona?!

Sì, tutto è molto semplice, se l'utente ha già scorso un certo numero di post e si trova in fondo alla pagina, altri messaggi vengono caricati con un leggero ritardo. Per fare questo, utilizzando $.post generiamo una richiesta POST alla pagina di download dei dati dal database (file .php), nello stesso file viene generata la struttura HTML dei record. Dopodiché, strutturando il markup HTML, i dati vengono restituiti allo script e inseriti nella pagina.

Il processo di determinazione della posizione dell'utente sulla pagina:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Se lo scorrimento è abilitato
if ($settings.scroll == true ) (
// .. e l'utente scorre la pagina
$(finestra).scroll(funzione() (

// Controlla se l'utente è in fondo alla pagina
if ($(finestra).scrollTop() + $(finestra).height() > $this.height() && !occupato) (

// Processo in corso
Occupato
$questo.).html) ;

// Esegue una funzione per recuperare i dati con un ritardo impostato
// Questo è utile se hai contenuto nel piè di pagina
setTimeout(funzione () (

OttieniDati();

), $settings.delay) ;

}
} ) ;
}

Probabilmente hai notato l'uso di variabili, parametri del plugin, per così dire, ne parleremo più avanti. La funzione di richiesta AJAX per un file PHP getData() si presenta così:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Funzione di richiesta AJAX
funzione getData() (

// Formare una richiesta POST a ajax.php
$.post("ajax.php" , (

Azione: "scorrimento pagina"
numero: $settings.nop,
compensazione: compensazione,

), funzione (dati) ) .html ($initmessage) ;

// Se i dati restituiti sono vuoti, segnalarlo
if (dati).html($settings.error);
}
altro(
// L'offset aumenta
offset = offset+ $settings.nop ;

// Aggiunge i dati ricevuti al contenuto DIV
$this.find(".content").append(data);

// Processo completato
occupato = falso;
}

} ) ;

File AJAX.php

Lo script PHP per interrogare il database e generare la struttura dei messaggi di output può sembrarti comunque accettabile. Tutto quello che devi fare è prendere alcune informazioni dal database MySQL di tua scelta. Quello che segue è un file ajax.php molto semplice che prende informazioni da un database MySQL e visualizza il contenuto con un titolo e un collegamento.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22