Aggiungere dinamicamente contenuti mentre si scrolla la pagina

Loading

Ora andremo ad illustrare come sia possiblie aggiungere dinamicamente del contenuto ad una pagina quando ne raggingiamo la fine.

Prima di proseguire in spiegazioni troppo astruse è meglio vedere una demo:

Demo

Nell’esempio mostrato appena raggiunta la fine della pagina viene inserita in coda una nuova linea, per non creare troppa confusione abbiamo limitato il numero delle possibili righe che aggiungiamo a 100, ovviamente questa limitazione non è necessaria.


Come sempre quando abbiamo a che fare con jQuery la prima cosa che dobbiamo fare è includere la libreria stessa nella nostra pagina, anche in questo caso utilizzeremo quella disponibile su google:

A questo punto nel body della pagina scriviamo qualcosa in modo che la pagina non venga visualizzata totalmente senza il bisogno di scrollare.
Dopo aver scritto il nostro testo “riempispazio” inseriamo un div vuoto in coda con id ugale a new:

Questo div sarà popolato delle nuove righe man mano che scrolleremo verso il basso.

Alla fine aggiungiamo il codice che carica la nuova riga quando viene percepito lo scroll:

var i=0;
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height() 
             && i<100){
		i++;
           	$('#new').append('Sono appena stato aggiunto ('+ i +')
'); } });

Il codice è molto semplice, per prima cosa notiamo che la variabile i è stata inserita solo per limitare le possibili righe a 100 e per stampare a video un conteggio delle stesse.
In pratica ogni volta che viene percepito uno scroll ci si chiede se abbiamo scrollato più in basso dell’ultima riga visibile (ossia se abbiamo raggiunto la fine della pagina), se cio è verificato ne viene inserita una nuova in coda.

Nel nostro caso le righe sono aggiunte “staticamente” ma ampliando il concetto, questa modalità di caricamento può essere applicata in molti contesti, ad esempio è possibile frammentare il download di pagine qunado nel caso in cui le stesse siano molto lunghe, oppure caricare 10 commenti alla volta e solo quando si arriva all’utlimo dei 10 richiedere al server i successivi.