Implementare l’infinite scroll con JavaScript/jQuery

Pubblicato il 22 Febbraio 2017

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: https://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“.

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 😉

CakePHP: invalidare un form in un controller

Convenzioni per la stesura del codice

Implementare richieste Ajax e JSONP con PhoneGap

Condividi il post con i tuoi amici o colleghi