Chargement ajax lorsque défilement atteint 80%

Je suis en utilisant le code suivant qui fonctionne lorsque la barre de défilement atteint le bas, 

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

J'souhaitent cependant que l'ajax est déclenché quand j'ai atteint 70% de défilement n'est pas à 100.

  • La recherche de plus..
InformationsquelleAutor Yahoo | 2012-05-19
  1. 85

    Fourni votre chèque est tir lors d'un défilement de la page du bas, vous pouvez essayer quelques-uns de base de l'arithmétique:

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

    Assurez-vous d'ajouter une case pour ne pas le feu simultanément plusieurs requêtes Ajax, si vous ne l'avez pas déjà fait.

    C'est plutôt hors de la portée de la question, mais si vous voulez un exemple de la façon d'éviter les demandes multiples de l'être déclenchés simultanément:

    Déclarer un mondial var, par exemple,processing.

    Ensuite l'incorporer dans votre fonction:

    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
    });
}

    C'est un exemple simple de l'utilisation d'une var à suivre si il y a un actif à une requête Ajax pour votre fonction de défilement ou non, et ne pas interférer avec un autre concordante requête Ajax qui vous pouvez avoir.

    Edit: JSFiddle exemple

    Veuillez noter que l'utilisation d'un % à mesurer la hauteur pourrait être une mauvaise idée, vu que le document de la hauteur va augmenter à chaque fois que vous chargez une chose, faire déclencher la requête Ajax étant relativement plus loin du fond de la page (dans l'absolu-taille sage).

    Je vous recommande d'utiliser une valeur fixe de décalage pour éviter que (200 à 700 environ):

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

    Exemple: JSFiddle

    Edit: Pour reproduire le problème dans le premier code, avec des pourcentages, charge 50 divs en elle. Lorsque vous chargez la prochaine div, il va ajouter de seulement 2% pour le total du document en hauteur, sens de la prochaine demande sera déclenché dès que vous faites défiler ces 2% de la 70% de la hauteur. Dans mon fixe exemple, la définition de fond de compensation à la charge du nouveau contenu uniquement lorsque l'utilisateur est défini absolue pixels de gamme à partir du bas de l'écran.

    • Ce code n'est pas efficace. et il va le feu à plusieurs reprises.
    • assurez-vous d'ajouter une case pour ne pas le feu simultanément plusieurs requêtes Ajax, si vous ne l'avez pas déjà fait., Il est hors de la portée de la question et doit être fait déjà dans tout bon projet. Mais je peux fournir la réponse que si demandé.
    • J'ai ajouté la manière d'éviter les demandes multiples de tir sans interférer dans possible concordante des requêtes ajax d'autres fonctions, même si c'est vraiment de base.
    • La pensée aussi. Alors même si je revenir en arrière et de revenir vers le bas?. Vous n'obtenez pas le point. Jquery .scroll() fonction est plus efficace que cela. Je ne pense pas que la personne ne se soucie de ce.
    • Le processing drapeau permettra d'éviter toute requête Ajax en provenance de cette fonction tout et ce, uniquement lorsqu'une requête AJAX à partir de cette fonction est en cours d'exécution. Après l'appel AJAX est terminée, et vous faites défiler passé de 70% à nouveau, il va en tirer à nouveau et répéter le cycle.
    • Si l'utilisateur retourne et revient tandis que la fonction est en cours d'exécution.. dire , une animation. il ne fonctionnera pas toujours que l'utilisateur a l'intention.
    • Je ne comprends toujours pas votre point de vue. Il empêche les demandes multiples de l'être déclenchés simultanément. Si l'utilisateur fait défiler en haut et en bas très vite (ce qui est peu probable), alors que l'AJAX fonction est en cours d'exécution, il ne se passera rien et le contenu sera chargé qu'une seule fois. Maintenant, à propos de la mise en œuvre/animations etc, OP n'a même pas le toucher qui importe donc, c'est sans importance.
    • Jquery threads du processus, à moins que la séquence de la prochaine fonctions dans les rappels. Si il threads, votre traitement va devenir de véritables tandis que la fonction est effectivement en cours d'exécution.
    • Prochaine fonctions? Les Threads? La fonction elle-même sera toujours return false peu importe combien de fois il est appelé alors que processing est égal à true. Il assure qu'une seule instance est dirigée à la fois. Si l'OP a venir les fonctions (ce qui est complètement hors de question de portée), il peut ajouter la processing=false; lors de l'appel AJAX se termine en réalité, comme spécifié dans mon commentaire dans la réponse du code.
    • Ajouté JSFiddle exemples à ma réponse, la valeur de la hauteur et de déclencher des décalages peuvent être un peu large mais c'est assez bon pour avoir une idée. N'hésitez pas à modifier dans le cas où vous avez n'importe quelle question.
    • Juste une remarque, votre fixe exemple semble avoir à peu près le même problème que le votre pour cent exemple.
    • Le "même" problème? Je n'ai pas remarqué de problème, sauf qu'il avait la charge deux fois si je défile trop vite, c'est parce que le décalage était trop grande par rapport à la div de taille. J'ai augmenté la taille de la div et ajout d'une note, essayez plus tard. 😛
    • Pour être plus précis, le problème de la page se perpétuellement en plus à chaque fois qu'un div est chargé; l'événement se produit, div est chargé, la page est plus longue. Faites défiler vers le bas de la page, un autre est chargé, la page est plus longue. Rincez, répétez, etc.
    • Oh, je vois. La page ne deviennent de plus en plus chaque fois que le contenu est chargé, comme je l'ai supposé que l'opération a été d'essayer de modifier/faire une infinité de scroller ou similaire. Le problème que j'ai abordé a été le déclenchement de la requête AJAX "plus tôt" chaque fois que le document de la hauteur augmente. 🙂
    • Ajout d'une édition à la fin de ma réponse, que j'ai remarqué que mon fix n'était pas très clair avec @Dédale de commentaire.
    • Réponse impressionnante. Merci une tonne 🙂
    • C'est une bonne réponse, mais il doit également s'assurer que 0 < $(document).height() - $(window).height() - 700 à l'avance, parce que sinon, vous allez faire des demandes déjà en haut de l'écran, ce qui peut entraîner beaucoup de demandes - même infiniment de nombreux cas, si la demande ne change pas la hauteur.

    InformationsquelleAutor Fabrício Matté
  2. 13

    Une recherche rapide sur google pour get percentage scrolled down apporte cette page que le premier résultat(avec le code ci-dessous, qui a plus ou moins fait ce que vous voulez). J'ai envie de vous n'essaiera pas de recherche avant de demander ici.

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

    }

});
    InformationsquelleAutor Daedalus - Reinstate Monica