Non seulement le chargement paresseux d'images dans les pages Web aident à la performance de l'âge, mais contribue également à SEO comme observé. Vous pouvez utiliser jQuery et même Mootools pour les images de chargement paresseux. Les images ne s'afficheront que lorsque vous ferez défiler jusqu'à elles.
Cette astuce jQuery réduit de nombreuses demandes externes lors du chargement de la page, aidant ainsi votre blog WordPress à se charger plus rapidement. Lors de l'utilisation de cette astuce, vous devez également utiliser la technique du cache pour simplifier le chargement de la page.
Table des matières
Qu'est-ce que le chargement paresseux?
Le chargement paresseux se produit lorsque vous téléchargez le contenu dont vous avez besoin, au lieu de le télécharger en une seule fois.
Le lazy loading est une technique d'optimisation utilisée sur Internet. Il ne charge que la section de la page Web dont vous avez besoin au début, et il ne charge aucune autre partie tant que vous n'avez pas cliqué dessus. De cette façon, il n'a pas à charger toutes les informations du début à la fin.
Une forme de chargement paresseux est appelée défilement infini. Cela signifie que lorsque vous faites défiler la page vers le bas, davantage de contenu se chargera automatiquement.
Pourquoi le chargement paresseux est-il important ?
L'énorme charge utile d'une page Web est pleine d'images, de scripts, de feuilles de style, de polices et de vidéos. Les images prennent plus de 60% de la taille d'une page Web type. Il n'est pas possible de s'en débarrasser car ils sont importants pour la conception d'une page web.
Sans aucune optimisation, votre navigateur Web télécharge tout avant d'afficher la page. Cela ralentit le chargement de la page.
Il est logique de faire ce que vous pouvez pour accélérer le chargement de vos pages Web. Et lorsqu'il s'agit d'images, ce sont elles qui contribuent le plus à la taille d'un site Web.
Donc, si vous commencez avec eux, c'est une bonne idée car votre site Web se chargera alors rapidement. C'est là que le lazy loading est utile car il ne télécharge que les parties d'une image qui sont visibles sur votre page à un moment donné.
Comment configurer le Lazy Loading avec jQuery ?
Il existe des plugins qui vous permettent d'effectuer des choses simples, mais moins vous utilisez de plugins, plus votre blog sera efficace.
Quel que soit le thème WordPress que vous utilisez, vous pouvez implémenter très facilement le chargement paresseux.
C'est juste un didacticiel en deux étapes, l'un pour ajouter le jQuery et l'autre pour attribuer une classe à la balise img, si vous souhaitez charger paresseux des images spécifiques sur votre blog WordPress.
Voici la fonction jQuery, que vous devrez ajouter aux scripts de votre thème.
/* lazyload.js (c) Lorenzo Giuliani * Licence MIT (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], function () { images.splice(i, i); }); } } ; } ; // Array.prototype.slice.call n'est pas appelable sous notre charmant IE8 pour (var i = 0; i < query.length; i++) { images.push(query[i]); } ; processScroll(); addEventListener('scroll',processScroll); }(cette);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Et voici comment vous pouvez appeler la fonction jQuery pour implémenter le chargement paresseux des images de manière dynamique. Vous devez utiliser la classe paresseuse pour chaque image que vous souhaitez charger à l'aide de la fonction jQuery.
Conclusion
Lazyload est une bonne chose à avoir pour votre blog ou site Web d'entreprise. Cela aide au référencement et Google peut le voir. Mais vous n'avez pas à vous en soucier car ils savent comment fonctionne le lazyload.
Vous pouvez également le personnaliser comme vous le souhaitez en modifiant l'animation et en ajoutant un délai.
Bonjour,
C'est une bonne information et c'est très utile. Lazy C'est très utile puisque j'utilisais des thèmes pour afficher des images.
Bon travail et continuez …!