infinite scroll

 

Implementare la tecnica dell’infinite scroll è piuttosto semplice ed, oggi, vedremo come farlo realizzando una comoda funzione in JavaScript e servendoci di jQuery.

Qui puoi visionare il risultato finale: http://www.emawebdesign.com/demo/infinitescroll

In pratica:

Caricheremo dinamicamente 3 pagine di contenuto testuale, in aggiunta alla pagina iniziale, ogni volta che scrolleremo verso il basso. Un pò come facciamo quando scorriamo i contenuti sui social media (Facebook, Instagram ecc.).

Implementazione

Innanzitutto predisponiamo il contenitore del contenuto; un div con id uguale a “content“:

 
<div id="content"></div>

Quindi inizializziamo le variabili count (il numero corrente di pagina) e total (il numero totale di pagine) e definiamo che, al verificarsi dell’evento scroll, venga richiamata la funzione loadContent:

 
var count = 1;
var total = 3;
 
var loading = true;
 
$(window).scroll(function() {
 
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
 
    if (count > total) {
        return false;
    }else {
        if (loading) {
	    loading = false;
	    loadContent(count);
        }
    }
 
    }
 
});

La funzione loadContent carica le informazioni dai file index1.html, index2.html e index3.html ed accoda il nuovo contenuto a quello esistente. Inoltre gestisce un loader e la paginazione. Osserviamo con attenzione la variabile loading che gestisce lo stato del caricamento specificando quando, questo’ultimo, può avvenire.

 
function loadContent(pageNumber) {
 
    $('#loader').removeClass('hidden');
 
    $.get("index" + pageNumber + ".html", function(html) {
 
        $('#loader').addClass('hidden');
        $('#content').append(html);
 
        loading = true;
 
        count++;
 
    }, 'html');
 
    return false;
 
}

Conclusione

Leggendo il codice è piuttosto evidente la semplicità nell’implementare una tecnica ormai usata dai più per il caricamento asincrono dei dati all’interno di applicazioni web. Per caricare i dati da remoto sarà sufficiente specificare la url (magari si tratta di un file PHP), al posto del file html statico dell’esempio, a cui inviare, ad ogni caricamento, il numero di pagina richiesta.

That’s all 😉

NO SPAM. Non fornirò la tua email a terzi e riceverai solo contenuti che ti interessano sugli argomenti che tratto e potrai cancellarti quando vuoi con un link che trovi in tutte le email.