Javascript Girl
  1. Javascript Girl
  3. Chargement différé du contenu de la page en utilisant JavaScript ou jQuery
Intereting Posts
Comment puis-je passer les variables du serveur node.js dans ma vue angulaire / html? Comment attendre la réponse AJAX et seulement après cela rendre le composant? Temporisateur global en Javascript avec rappel multiple Dynamic favicon utilisant une manipulation d'image similaire à Gmail ajoutant un compte Comment puis-je empêcher l'événement onclick d'un parent de se déclencher lorsqu'un cliquet d'enfant est cliqué? Intégrez MarkerClusterer avec Google Map V3 basé sur la base de données Pourquoi la variable «événement» est-elle disponible même si elle n'est pas passée en tant que paramètre? Appeler une fonction Javascript depuis la console Mocking and Stubbing with trainer Faire face à un objet JSON trop grand pour entrer dans la mémoire Appel des API natives Android des fonctions javascript de WebView intégrée Obtenir un élément aléatoire du tableau JavaScript Bouclez bien toutes les boîtes de saisie et nettoyez-les Existe-t-il un support de navigateur intégré pour les nombres aléatoires cryptographiques dans IE et Webkit? Firefox a window.crypto Comment implémenter le curseur de la gamme jQuery dans AngularJS

Chargement différé du contenu de la page en utilisant JavaScript ou jQuery

J'ai vu quelques sites Web où leur page d'accueil est trop grande et lorsque l'utilisateur se déplace vers le bas pour lire le contenu à la fin de la page, puis quelques zones de cette page sont chargées dynamiquement. Comment concevaient-ils leur page?

Par exemple, le site est http://blog.rainbird.me/ où vous pouvez voir l'effet. Comment peut-on l'être via jQuery et Ajax?

Charge de contenu paresseuse: http://www.appelsiini.net/projects/lazyload

Chargez le contenu en défilement: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Vous le faites comme ceci:

1: découvrez la hauteur maximale du navigateur pour vos utilisateurs (il est probablement sûr d'assumer 1920px car très peu d'utilisateurs ont plus de 2560×1920 affichages)

2: rendez votre liste de sorte qu'il soit légèrement plus long que 1920px, vous pouvez même le doubler pour avoir une marge sûre

3: accrochez l'événement de défilement sur le document $(document.body).scroll(myScrollHandler)

4: quand document.body.scrollTop est assez proche pour document.body.scrollHeight vous ajoutez plus de données sur votre page 

 $.get(urlToGetMoreDataFrom,function(data){ $(document.body).append(data)}); 
 function CheckIfElementIsInsideViewport(element) { var jElement = jQuery(element); var jElementTop = jElement.position().top; var jElementBottom = jElement.height() + jElementTop; var jElementLeft = jElement.position().left; var jElementRight = jElement.width() + jElementLeft; var windowTop = jQuery(window).scrollTop(); var windowBottom = jQuery(window).height() + windowTop; var windowLeft = jQuery(window).scrollLeft(); var windowRight = jQuery(window).width() + windowLeft; var topVisible = jElementTop > windowTop && jElementTop < windowBottom; var bottomVisible = jElementBottom > windowTop && jElementBottom < windowBottom; var leftVisible = jElementLeft > windowLeft && jElementLeft < windowRight; var rightVisible = jElementRight > windowLeft && jElementRight < windowRight; return (topVisible && (leftVisible || rightVisible)) || (bottomVisible && (leftVisible || rightVisible)); } /* Magazine sneakpeak loader (Only loads content when visible in viewport!) */ var magazineSneakPeakHtml = "<p>Loaded!</p>"; jQuery(function() { var sneakPeak = jQuery(".box-newestmagazinepeek"); jQuery(window).bind("scroll", function() { SneakPeakMaybe(sneakPeak); }); SneakPeakMaybe(sneakPeak); }); function SneakPeakMaybe(jElement) { if (CheckIfElementIsInsideViewport(jElement)) { jQuery(".box-newestmagazinepeek .box-content").html(magazineSneakPeakHtml); jQuery(window).unbind("scroll"); } } /**/

Comment le faire sans jQuery: Comment savoir si un élément DOM est visible dans la fenêtre actuelle?

Cela vérifiera si l'élément est entièrement visible dans la fenêtre actuelle: 

 function elementInViewport(el) { var top = el.offsetTop; var left = el.offsetLeft; var width = el.offsetWidth; var height = el.offsetHeight; while(el.offsetParent) { el = el.offsetParent; top += el.offsetTop; left += el.offsetLeft; } return ( top >= window.pageYOffset && left >= window.pageXOffset && (top + height) <= (window.pageYOffset + window.innerHeight) && (left + width) <= (window.pageXOffset + window.innerWidth) ); }

Vous pouvez modifier cela simplement pour déterminer si une partie de l'élément est visible dans la fenêtre: 

 function elementInViewport2(el) { var top = el.offsetTop; var left = el.offsetLeft; var width = el.offsetWidth; var height = el.offsetHeight; while(el.offsetParent) { el = el.offsetParent; top += el.offsetTop; left += el.offsetLeft; } return ( top < (window.pageYOffset + window.innerHeight) && left < (window.pageXOffset + window.innerWidth) && (top + height) > window.pageYOffset && (left + width) > window.pageXOffset ); }

Vous pouvez placer des éléments sur votre page qui indiquent la fin du contenu, lorsque cet élément entre dans la fenêtre que vous pouvez charger et ajouter un nouveau contenu ci-dessous à l'aide de jQuery ajax (get): http://api.jquery.com/jQuery.get /

Notez que cette méthode est très importante, car elle vérifie si l'élément se trouve à l'intérieur de la fenêtre chaque fois que le client se défile!