web-dev-qa-db-fra.com

jQuery charge plus de données sur le défilement

Je me demande simplement comment puis-je implémenter plus de données sur le défilement si le div.loading est visible.

Habituellement, nous recherchons la hauteur de page et la hauteur de défilement pour voir si nous devons charger plus de données. mais l'exemple suivant est un peu compliqué alors.

L'image suivante est un exemple parfait. il y a deux divisions .loading dans la liste déroulante. Lorsque l'utilisateur fait défiler le contenu, celui qui est visible devrait commencer à charger plus de données.

enter image description here

Alors, comment puis-je savoir si .loading div est visible ou non pour l'utilisateur? Je peux donc commencer à charger les données pour cette div uniquement.

javascriptjqueryajaxscroll
126
Basit

Dans jQuery, vérifiez si vous avez atteint le bas de la page en utilisant la fonction de défilement. Une fois que vous cliquez dessus, passez un appel ajax (vous pouvez afficher une image de chargement ici jusqu'à la réponse ajax) et obtenez le prochain jeu de données, ajoutez-le au div. Cette fonction est exécutée lorsque vous faites défiler à nouveau la page.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});
252
deepakssn

Avez-vous entendu parler du plugin jQuery Waypoint .

Vous trouverez ci-dessous une méthode simple pour appeler un plug-in de points de cheminement et faire en sorte que la page charge davantage de contenu une fois que vous avez atteint le bas du défilement:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});
84
defau1t

La réponse acceptée à cette question pose problème avec chrome lorsque la fenêtre est agrandie à une valeur> 100%. Voici le code recommandé par les développeurs de Chrome dans le cadre d'un bogue que j'avais soulevé à ce sujet.

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});

Pour référence:

Question SO connexe

Chrome Bug

3
Prasanth K C

Si tous vos documents ne défilent pas, par exemple, lorsque le document contient une variable div, les solutions ci-dessus ne fonctionneront pas sans adaptations. Voici comment vérifier si la barre de défilement de la div a touché le bas:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
1
The Coprolal

J'ai passé du temps à essayer de trouver une fonction de Nice pour envelopper une solution. Quoi qu’il en soit, cela a abouti à ce que j’estime être une meilleure solution lorsque vous chargez plusieurs contenus sur une seule page ou sur un site.

Une fonction:

function ifViewLoadContent(elem, LoadContent)
    {
            var top_of_element = $(elem).offset().top;
            var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            if(!$(elem).hasClass("ImLoaded"))   {
                $(elem).load(LoadContent).addClass("ImLoaded");
            }
            }
            else {
               return false;
            }
        }

Vous pouvez ensuite appeler la fonction en utilisant window on scroll (par exemple, vous pouvez également la lier à un clic, comme je le fais aussi, d'où la fonction):

Utiliser:

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html"); 

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html"); 
    });

Cette approche devrait également fonctionner pour le défilement des divisions, etc. J'espère que cela vous aidera. Dans la question ci-dessus, vous pouvez utiliser cette approche pour charger votre contenu dans des sections, éventuellement ajouter et dribbler ainsi toutes les données de l'image plutôt que celles en bloc.

J'ai utilisé cette approche pour réduire les frais généraux sur https://www.taxformcalculator.com . Si vous regardez le site et inspectez les éléments, vous pouvez constater l’impact sur le chargement de la page dans Chrome (à titre d’exemple).

0
Pete - iCalculator