it-swarm.com.de

jQuery lädt Inhalt, wenn zum unteren 100px der Seite geblättert wird und mehrere Ereignisse ausgelöst werden

Ich möchte, dass ein Ereignis mehr Inhalt lädt, wenn ein Benutzer einen Bildlauf durchführt und fast den unteren Rand der Seite erreicht, etwa 100px von unten. Das Problem ist, dass die Ereignisse jedes Mal ausgelöst werden, wenn Sie in diesem unteren 100px der Seite blättern. Das ist ein offensichtliches Problem, das aus offensichtlichen Gründen nicht passieren kann. Ich wundere mich also, wie ich das am besten kann. Ich habe mir andere Antworten/Fragen angesehen, aber die eine Lösung, die teilweise funktioniert, passt nicht zu dem, was ich brauche zu tun, und wenn ich versuche, es zu ändern, friert es meinen Browser jedes Mal komplett ein. Dies ist die Frage: Prüfen Sie, ob ein Benutzer nach unten gescrollt ist

Die Antwort, die ich mir anschaue, ist fast ganz unten, aber hier ist der Code, den er vorschlägt:

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

nun, wie gesagt, das funktioniert und verhindert, dass mehr als ein Ereignis ausgelöst wird. Das Problem ist, dass ich eine unendliche Anzahl von Ereignissen auslösen muss. Ich sage, dass ich 100 Zeilen mit Informationen geladen habe, wenn Sie den Boden erreicht haben, aber es gibt noch 1500 weitere Ich muss es jedes Mal wiederholen, um jede Informationsmenge zu laden (wenn Sie jedes Mal den unteren 100px-Teil der Seite erreichen)

also habe ich versucht zu tun:

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

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

wie gesagt, das friert mein Browser jedes Mal sofort ein, der Bindungsteil. 

11
Dylan Cross

Ich hatte auch das gleiche Problem. Ich bin auf diesen link gestoßen und es hat wirklich geholfen (und gearbeitet)!

Update: Ich habe mir den Code angesehen und denke, dass Sie beim erneuten Binden die Funktion verpassen, die Sie erneut binden können.

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

Das wird dir helfen.

<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>

Gehen Sie diesen Link durch, um den gesamten Artikel und Details zum Auslösen mehrerer Ereignisse anzuzeigen.

mehr Inhalt laden, wenn der Browser in jquery zum Seitenende blättert

3
Rohit

Ich hatte das gleiche Problem. Um dies zu lösen, verwenden Sie die Bibliothek Underscore.js, um das Auslösen mehrerer Ereignisse zu verhindern. Hier ist der Link. http://underscorejs.org/#throttle

0