lädt ajax wenn Scroll 80%

Question

erreicht ich den folgenden Code verwenden, die arbeitet, wenn die Bildlaufleiste die botttom erreicht,

if($(window).scrollTop() == $(document).height() - $(window).height()){ 

ich aber mag, dass das Ajax wird ausgelöst, wenn ich 70% der Spirale erreicht nicht 100.

Answer 1

Sofern Ihre aktuelle Prüfung wenn auf die Seite des unteren gescrollt feuert, können Sie einige grundlegende arithmetics versuchen:

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){ 
              //where 0.7 corresponds to 70% --^ 

Stellen Sie sicher, einen Scheck hinzufügen mehrere gleichzeitige Ajax-Anfragen feuern nicht, wenn du es nicht schon getan hast.

Dies ist eher aus dem Umfang der Frage, aber wenn Sie ein Beispiel wollen, wie gleichzeitig zu verhindern, dass mehrere Anfragen gefeuert:

eine globale var deklariert, z.B. processing.

Dann binden sie in Ihrer Funktion:

if (processing) 
    return false; 

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){ 
    processing = true; //sets a processing AJAX request flag 
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc. 
     //load the content to your div 
     processing = false; //resets the ajax flag once the callback concludes 
    }); 
} 

, dass ein einfaches Beispiel ist eine var verwenden, um zu verfolgen, wenn eine aktive Ajax-Anfrage für Ihre Scroll-Funktion ist oder nicht, und es stört nicht jede andere übereinstimmende Ajax-Anfrage, die Sie haben können.

Edit: JSFiddle example

Bitte beachten Sie, dass ein% mit der Dokumentenhöhe zu messen, könnte eine schlechte Idee sein, dass die Höhe jedes Mal, wenn Sie etwas zu laden erhöht des Dokuments unter Berücksichtigung, es löst die Ajax-Anfrage machen ist relativ mehr weit vom unteren Rand der Seite (absolute Größe).

Ich würde empfehlen, einen festen Wert mit Offset, zu verhindern (200-700 oder so):

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){ 
           // pixels offset from screen bottom --^ 

Beispiel: JSFiddle

Edit: das Problem in dem ersten Code zu reproduzieren mit Prozenten laden 50 div s hinein. Wenn Sie die nächste div laden, fügt es nur 2% zur Gesamthöhe des Dokuments hinzu, was bedeutet, dass die nächste Anfrage ausgelöst wird, sobald Sie diese 2% zurück zu den 70% der Dokumentenhöhe scrollen. In meinem festen Beispiel wird der definierte untere Offset nur dann neuen Inhalt laden, wenn sich der Benutzer in einem definierten absoluten Pixelbereich vom unteren Bildschirmrand befindet.

Answer 2

Eine schnelle Google-Suche nach get percentage scrolled down bringt this page als erstes Ergebnis (mit dem Code unten, der mehr oder weniger tut, was Sie wollen). Ich habe das Gefühl, dass du keine Forschung versucht hast, bevor du hier nach fragst.

$(document).scroll(function(e){ 

    // grab the scroll amount and the window height 
    var scrollAmount = $(window).scrollTop(); 
    var documentHeight = $(document).height(); 

    // calculate the percentage the user has scrolled down the page 
    var scrollPercent = (scrollAmount/documentHeight) * 100; 

    if(scrollPercent > 50) { 
     // run a function called doSomething 
     doSomething(); 
    } 

    function doSomething() { 

     // do something when a user gets 50% of the way down my page 

    } 

});