Permettez-moi de partager avec vous neuf bibliothèques de chargement paresseux d'images JavaScript

La colonne

javascript présente plusieurs bibliothèques de chargement différé d'images.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Pourquoi avons-nous besoin du chargement paresseux des images

Les performances sont essentielles dans les applications Web. Vous pouvez avoir le site Web le plus beau et le plus attrayant au monde, mais s’il ne se charge pas rapidement sur un navigateur, les gens auront tendance à l’ignorer. Faire en sorte que votre site Web fonctionne vraiment bien peut être assez délicat. En effet, il existe de nombreux goulots d'étranglement dans le développement Web, tels qu'un JavaScript coûteux, un affichage lent des polices Web, des ressources d'images volumineuses, etc.

Dans cet article, nous nous concentrons principalement sur l'impact des ressources d'images sur le site Web. Selon les recherches de Jecelyn, une page Web consomme en moyenne 5 Mo de données rien que pour charger des images. Cela peut représenter un lourd fardeau pour les utilisateurs, car les données mobiles sont très coûteuses dans certains pays. Les utilisateurs rencontrent également des problèmes avec les sites qui prennent trop de temps à charger, en particulier sur les connexions lentes. Ceux-ci peuvent avoir un impact négatif sur votre site Web.

Selon les recherches de Jakob Nielson, voici quelques statistiques importantes que vous devez garder à l'esprit :

• Les temps de chargement d'un site Web inférieurs à 100 millisecondes sont considérés comme instantanés.
• Une latence comprise entre 100 et 300 millisecondes est perceptible.
• 47 % des consommateurs s'attendent à ce que les pages Web se chargent en deux secondes ou moins.
• 40 % des consommateurs n'attendront pas plus de 3 secondes pour charger avant d'abandonner un site Web.

Qu'est-ce que le chargement paresseux ?

Il existe plusieurs stratégies qui peuvent fournir des services efficaces pour les ressources d'images de sites Web sans affecter les performances et la qualité, et le chargement paresseux en fait partie. Le chargement paresseux signifie charger uniquement ce qui est nécessaire et différer le reste jusqu'à ce que cela soit nécessaire. Cette stratégie peut être appliquée aux images, vidéos, textes et autres types de données. Mais surtout, il convient aux contenus volumineux tels que les images.

Il existe plusieurs façons de mettre en œuvre le chargement différé des images sur votre site Web. Par exemple, vous pouvez utiliser Intersection Observer API ou utiliser un gestionnaire d'événements pour déterminer si un élément est visible. Il existe également plusieurs bibliothèques JavaScript puissantes. Vous pouvez utiliser les méthodes de bibliothèque de chargement différé d'images suivantes en fonction de vos besoins et de votre compatibilité. Jetons un coup d'oeil !

Lazy Sizes

Lazy Sizes est actuellement l'une des meilleures bibliothèques à chargement paresseux, avec plus de 14,1K collections sur Github, et seulement 3,4 Ko après compression. Il prend également en charge environ 98,5 % des utilisateurs de navigateurs et sa documentation est également rédigée de manière facile à comprendre.

Fonctionnalités

• Contient la prise en charge des images réactives.
• Optimise le référencement en détectant les moteurs de recherche à l'aide d'agents utilisateurs et en chargeant toutes les images instantanément.
• Basé sur un code efficace et pratique.
• Préchargez les ressources lorsque la connexion réseau est inactive.
• Contient la prise en charge des LQIP.
• prend en charge IntersectionObserver, MutationObserver et getElementsByClassName etc.
• Prend en charge l'utilisation de plug-ins pour étendre les fonctionnalités.
• Prend en charge le calcul automatique de la taille de l'image de réponse.

Vous pouvez voir un exemple ici.

Lozad.js

Lozad.js prend en charge le chargement paresseux d'images, iframe, d'annonces, de vidéos et d'autres éléments. Il compte près de 6,4K collections sur Github et est très populaire dans la communauté. Selon l'équipe de recherche, cette bibliothèque est utilisée par les applications Web de plusieurs marques, dont Tesla, Domino, Xiaomi et la BBC. C'est très petit, seulement 1,1 Ko compressé. Puisqu'il utilise l'API IntersectionObserver et l'API MutationObserver, il prend en charge environ 92 % des utilisateurs de navigateurs.

Caractéristiques

• Il n'y a aucune dépendance.
• Prend en charge le chargement paresseux des éléments ajoutés dynamiquement.
• Utilise entièrement JavaScript.
• Contient la prise en charge des LQIP et des images de réponse.
• est plus efficace que les bibliothèques utilisant getBoundingClientRect().
• Les Polyfills peuvent être utilisés sur les navigateurs non pris en charge.

Vous pouvez voir un exemple ici.

Lazyload de Tuupola

Lazyload de Tuupola est une autre bibliothèque de chargement paresseux d'images populaire sur Github, avec près de 8,4K collections. Il utilise l'API IntersectionObserver et est simple et facile à utiliser. Il ne fait que 956 octets après compression, ce qui est plus petit que les autres bibliothèques. Cela peut être attribué au fait qu'il utilise uniquement l'API IntersectionObserver, car d'autres bibliothèques utilisent d'autres combinaisons pour obtenir une meilleure compatibilité et de meilleures performances. De plus, grâce à cela, 92 % des utilisateurs de navigateurs le prennent actuellement en charge.

Caractéristiques

• Il comprend un wrapper jQuery pour plus de commodité.
• Inclut la prise en charge des LQIP et des images réactives.
• L'API IntersectionObserver principale peut être configurée en transmettant des paramètres supplémentaires.

Vanilla Lazyload par Andrea Verlicchi

Vanilla lazyload est une autre bibliothèque JavaScript pure pour le chargement paresseux d'images, de vidéos et d'iframes. Il est très populaire sur Github, avec près de 1500 dépôts et packages disponibles. Il compte plus de 1,9 million de téléchargements par an sur NPM. Il ne fait que 2,7 Ko compressés. Semblable à d'autres bibliothèques, cette bibliothèque utilise l'API IntersectionObserver, qui est prise en charge par 92 % des utilisateurs de navigateurs.

• Convivial pour le référencement car la bibliothèque ne couvre pas les images des moteurs de recherche.
• Prend en charge les connexions réseau instables car la bibliothèque rechargera automatiquement les images après l'interruption de la connexion.
• Annulez le chargement de l'image si elle quitte la fenêtre.
• Contient la prise en charge des LQIP et des images de réponse.
• Utilise entièrement JavaScript.

Vous pouvez voir un exemple ici.

Yall.js

Yall.js est une autre bibliothèque JavaScript qui utilise également uniquement l'API IntersectionObserver pour charger paresseux des images, des vidéos, iframe et des images d'arrière-plan CSS. Cette bibliothèque compte environ 1,1K collections et est utilisée par 91 utilisateurs dans leurs bibliothèques de projets. Cette bibliothèque peut être compressée à 1 Ko. Comme nous l'avons vu avec les bibliothèques précédentes, Yall.js prend également en charge 92 % des utilisateurs de navigateurs grâce à l'utilisation de l'API IntersectionObserver. Il est important de noter que si le navigateur ne prend pas en charge l'API IntersectionObserver, il n'y aura pas de sauvegarde. Dans ce cas, vous devez utiliser polyfill .

Fonctionnalités

• Prend en charge la détection des éléments chargés dynamiquement à l'aide de l'MutationObserver API.
• Optimisez le temps d'inactivité du navigateur avec la méthode requestIdleCallback.
• prend en charge LQIP directement via l'attribut src.
• Prend en charge le chargement paresseux des arrière-plans CSS.

Layzr.js

Layzr.js est une bibliothèque légère de chargement paresseux d'images basée sur JavaScript. Il utilise principalement Element.classList, avec quelques méthodes de tableau ES5 et méthodes requestAnimationFrame. Grâce à ces API, plus de 97 % des utilisateurs de navigateurs supportent cette bibliothèque. Layzr.js compte plus de 5,6K collections sur Github et est si populaire qu'il ne pèse que 1 Ko une fois compressé.

• Il n'y a aucune dépendance.
• Sélection intelligente des sources d'images en fonction de la compatibilité et de la disponibilité du navigateur.
• Prend en charge les éléments ajoutés dynamiquement.
• Documentation et exemples clairs et concis.
• Les images de réglage de la fenêtre avec l'attribut seuil sont chargées paresseusement, ce qui permet aux images d'être chargées plus tôt ou plus tard selon les besoins.

Vous pouvez voir un exemple ici.

Blazy.js

Blazy.js est une autre bibliothèque légère de chargement paresseux JavaScript qui peut gérer des images, des vidéos et iframe. Il est très populaire sur Github avec 2,6K collections et est actuellement utilisé par plus de 860 bibliothèques de projets open source. Il ne fait que 1,9 Ko compressé.

utilise la méthode Element.getBoundingClientRect(), qui peut ne pas être exécutable par rapport à d'autres bibliothèques implémentant l'API IntersectionObserver. Mais grâce à cette approche, cette bibliothèque est prise en charge par plus de 98 % des utilisateurs de navigateurs. Il utilise également Element.closest(). La prise en charge par le navigateur de cette API est d'un peu plus de 94 %. Dans ce cas, vous n'avez pas à vous soucier des 6 % manquants car la bibliothèque comprend un polyfill pour les navigateurs non pris en charge.

Fonctionnalités

• Utilisé sur de vrais sites Web avec des millions de visites mensuelles.
• Il n'y a aucune dépendance.
• Prend en charge les images réactives.
• Semblable à Layzr.js, il permet de charger des éléments avec des décalages.
• Documentation claire avec exemple de code.
• Prend en charge les formats de modules tels que AMD, CommonJS et globals.
• Très facile de fournir des images de la rétine.

Vous pouvez voir un exemple ici.

Responsively Lazy

Responsively Lazy est également une bibliothèque de chargement paresseux pour les images. Son contenu est concis, seulement 1,1 Ko compressé. En raison de sa bonne implémentation syntaxique, il se démarque de nombreuses bibliothèques. La plupart des bibliothèques dont nous avons parlé ci-dessus nécessitent que vous utilisiez la balise noscript pour les navigateurs avec javascript désactivé, que vous ignoriez l'attribut src, etc. Mais les paresseux peuvent utiliser l'attribut traditionnel src et ajouter les attributs srcset et src pour les navigateurs pris en charge. Cela rend cette bibliothèque conviviale pour l’optimisation des moteurs de recherche (SEO). Cette bibliothèque utilise également Element.getBoundingClientRect() donc la redistribution forcée de la mise en page apparaîtra également dans cette bibliothèque.

De plus, cette bibliothèque compte près de 1,1K collections sur Github et est prise en charge par près de 95 % des utilisateurs de navigateurs.

Fonctionnalités

• Prend en charge les images réactives.
• Support webp.
• Convivial pour l'optimisation des moteurs de recherche (SEO).
• Peu de personnalisations disponibles.

Vous pouvez voir un exemple ici.

LazyestLoad.js

LazyestLoad.js est l'une des plus petites bibliothèques de cette liste. Il ne fait que 700 octets, compressés à seulement 639 octets. Il existe deux versions de cette bibliothèque, lazyload et lazyestload. Ils ont tous des utilisations différentes, la version lazyload fonctionne comme la bibliothèque normale, l'image sera chargée lorsqu'elle est sur le point d'entrer dans la fenêtre, cependant la version lazyestload ne se charge que lorsque l'utilisateur arrête de faire défiler et que l'image est dans la fenêtre ; la fenêtre d'affichage ou les images dans les 100 pixels seront chargées. Cela permet de réduire la charge du réseau si l'utilisateur fait simplement défiler sans s'arrêter pour voir l'image.

Il utilise principalement la méthode Element.getBoundingClientRect(), qui n'est pas très efficace par rapport à d'autres implémentations et est également connue pour déclencher des reflows de mise en page.

Cette bibliothèque ne gère que les images, contrairement à d'autres bibliothèques qui peuvent gérer les vidéos et iframe. Il compte également plus de 15 000 collections sur Github.

Caractéristiques

• Simple et direct.
• Ne permet pas une personnalisation poussée comme les autres bibliothèques.
• Prend en charge les images réactives.
• La documentation n'est pas assez détaillée.

Vous pouvez voir l'exemple de lazyload et voir l'exemple de lazyestload.

---

Comme la plupart des navigateurs modernes prennent en charge le chargement différé natif, il est recommandé d'utiliser l'implémentation native. Le chargement paresseux natif garantit également que les images se chargent paresseusement même si JavaScript est désactivé dans le navigateur. Utilisez simplement l'attribut img dans la balise loading="lazy" et évitez tous les ennuis.

La plupart des navigateurs modernes prennent en charge le chargement paresseux natif et la prise en charge de Safari sera bientôt disponible. Actuellement, le taux de prise en charge du navigateur est de 74 %. Si le navigateur ne prend pas en charge l'implémentation native, vous pouvez utiliser polyfill ou l'une des bibliothèques de chargement différé ci-dessus.

Pour être prudent, vous souhaiterez peut-être toujours utiliser des importations dynamiques pour implémenter l'une de ces bibliothèques.

Connaissez votre public cible

Si vous analysez attentivement toutes les bibliothèques données ci-dessus, vous constaterez qu'elles rivalisent férocement sur trois aspects : performances, taille et compatibilité des navigateurs (couverture des utilisateurs). Ceux-ci doivent généralement en sacrifier au moins un pour améliorer le niveau de l’autre.

Par exemple, si vous utilisez une bibliothèque qui implémente l'API IntersectionObserver, vous obtiendrez une bibliothèque hautes performances, mais sa couverture d'utilisateurs sera plus petite. Si un correctif est nécessaire, il doit y avoir une option de secours, telle que polyfills, qui augmentera la taille globale de la bibliothèque.

Dans un autre exemple, si une bibliothèque à chargement paresseux utilise la méthode getBoundingClientRect(), elle ne fonctionnera pas aussi bien que l'API IntersectionObserver car elle est connue pour avoir des problèmes de redistribution forcée de la mise en page. Bien que les performances soient sacrifiées, la couverture des utilisateurs sera plus élevée que la première. J'espère pouvoir clarifier cela.

Comment minimiser les problèmes de compatibilité et maximiser les performances ?

Ces aspects peuvent être améliorés en comprenant votre public cible et son utilisation du navigateur. Si vous connaissez votre public cible et les navigateurs qu'il utilise, vous pouvez vous assurer que votre implémentation du chargement différé est mieux adaptée à ces versions de navigateur. Cela réduira le besoin d'inclure polyfill pour les navigateurs non pris en charge, car on saura déjà quels navigateurs doivent être concernés. Lorsque vous disposez d'une valeur aberrante (navigateur non pris en charge), les images peuvent se charger directement sans aucun décalage ni délai. Si vous avez une bonne compréhension de votre audience, le nombre de ces valeurs aberrantes sera négligeable.

Cette approche permettra d'utiliser une bibliothèque d'implémentation performante, de maintenir la taille de la bibliothèque au minimum en ignorant les exceptions du navigateur et de prendre en charge la version du navigateur de l'utilisateur cible.

---

Cet article traite brièvement de la bibliothèque de chargement paresseux de JavaScript et de certaines méthodes pour améliorer l'efficacité et l'expérience utilisateur. Donnez votre avis dans les commentaires ci-dessous.

Merci d'avoir lu et bon codage ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!