jQuery

Charger du contenu au défilement

Publié en janvier 2014 1 extrait de code par Rémy Montangé

Fiche écrite en 2014 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

Le défilement infini : quand le visiteur approche du bas de la page, on charge la suite de la liste. La variable loading sert de verrou, pour ne pas lancer un second chargement tant que le premier n’est pas revenu.

JavaScript

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});

$(document).ready(function() {
    $('#loaded_max').val(50);
});

Autres fiches jQuery