web-dev-qa-db-fra.com

jQuery charger le contenu lorsque défiler vers le bas-100px de la page, plusieurs événements déclenchés

Je souhaite qu'un événement charge plus de contenu lorsqu'un utilisateur fait défiler et atteint presque le bas de la page, par exemple à environ 100 pixels du bas, le problème est que les événements sont déclenchés chaque fois que vous faites défiler l'écran dans le bas 100 pixels de la page, c'est donc un problème évident qui ne peut pas se produire, pour des raisons évidentes, alors je me demande comment je peux le faire au mieux. J'ai vérifié d'autres réponses/questions ici, mais la solution qui fonctionne partiellement ne correspond pas à ce dont j'ai besoin à faire, et quand j'essaie de le changer pour qu'il le soit, il gèle complètement mon navigateur à chaque fois . Telle est la question: Vérifier si un utilisateur a fait défiler vers le bas

La réponse que je regarde est presque en bas, mais voici le code qu'il suggère:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

maintenant, comme je l'ai dit, cela fonctionne et empêche plus d'un événement d'être déclenché, le problème est que je dois avoir un nombre infini d'événements déclenchés, disons que je charge 100 rangées d'informations lorsque vous atteignez le bas, mais il en reste encore 1500 , j’ai besoin de le répéter à chaque fois pour charger chaque quantité d’informations (une fois que vous avez atteint la partie inférieure de la page, 100px à chaque fois)

donc ce que j'ai essayé de faire est:

 function loadMore()
{
   alert("More loaded");
   $(window).bind('scroll');
 }

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
});

comme je le disais, cela gèle mon navigateur immédiatement à chaque fois, la partie obligatoire. 

javascriptjquerypaginationscroll
11
Dylan Cross

J'avais aussi le même problème. Je suis tombé sur ce lien et cela m'a vraiment aidé (et a fonctionné)!

Mise à jour: J'ai regardé le code et je pense que lorsque vous vous reliez, vous manquez la fonction à relier.

jsFiddle

 function loadMore()
{
   console.log("More loaded");
    $("body").append("<div>");
   $(window).bind('scroll', bindScroll);
 }

 function bindScroll(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
}

$(window).scroll(bindScroll);
33
JoeFletch

Cela vous aidera.

<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

$(window).scroll(function () {
 if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
  if (isPreviousEventComplete && isDataAvailable) {

    isPreviousEventComplete = false;
    $(".LoaderImage").css("display", "block");

    $.ajax({
      type: "GET",
      url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
      success: function (result) {
        $(".divContent").append(result);

        sIndex = sIndex + offSet;
        isPreviousEventComplete = true;

        if (result == '') //When data is not available
            isDataAvailable = false;

        $(".LoaderImage").css("display", "none");
      },
      error: function (error) {
          alert(error);
      }
    });

  }
 }
 });
 </script>

Passez par ce lien pour lire l’article en entier et détaille comment déclencher plusieurs événements.

charge plus de contenu lorsque le navigateur défile jusqu'à la fin de la page dans jQuery

3
Rohit

J'ai eu le même problème. Pour le résoudre, utilisez la bibliothèque underscore.js pour empêcher plusieurs événements de se déclencher. Voici le lien. http://underscorejs.org/#throttle

0
Filix Mogilevsky