Javascript Girl
  1. Javascript Girl
  3. JQuery charge plus de données sur le défilement
Intereting Posts
Comment puis-je modifier html à partir d'un appel ajax avant de l'ajouter au document? Suivi des événements Google pour le numéro de téléphone Window.location.href vs cliquant sur un Anchor Affichage de la base de données sur PHP en utilisant ajax Uncaught SecurityError: Impossible d'exécuter 'getImageData' sur 'CanvasRenderingContext2D': le canevas a été entaché par des données d'origine croisée La variable booléenne revient en chaîne à partir de la fonction javascript Quelle est la meilleure façon de passer à travers un ensemble d'éléments en JavaScript? TypeError: Impossible de lire la propriété 'then' of undefined Variable de session non transmise dans le serveur en direct JavaScript: Capturer le clic droit et désactiver le menu uniquement dans un certain élément TypeError: l'objet n'est pas une fonction Le côté du serveur Javascript? JavaScript ajoutant une chaîne à un nombre Comment ouvrir un popup sur un événement survolté avec un contente cliquable Affectation des événements aux vues – Déclenchement des nombres inégalés

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 uniquement si la division est visible.

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

L'image suivante est un exemple parfait. Il y a deux .charging div's sur la liste déroulante. Lorsque l'utilisateur fait défiler le contenu, si celui-ci est visible, il devrait commencer à charger plus de données.

Entrez la description de l'image ici

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

Avez-vous entendu parler du plugin jQuery Waypoint .

Vous trouverez ci-dessous la manière simple d'appeler un plugin de waypoints et de charger plus de Contenu une fois que vous avez atteint le bas sur le 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); });

Dans jQuery, vérifiez si vous avez frappé le bas de la page à l'aide de la fonction de défilement. Une fois que vous avez frappé cela, faites un appel ajax (vous pouvez afficher une image de chargement ici jusqu'à une réponse ajax) et obtenir le prochain ensemble de données, l'ajouter à la div. Cette fonction s'effectue lorsque vous faites défiler la page à nouveau. 

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