Une migration progressive vers un chargement natif paresseux

 cette démonstration en direct . 
 Il s'agit néanmoins d'un script très basique, et les choses peuvent devenir compliquées lorsque vous utilisez des attributs ou des balises supplémentaires pour obtenir images sensibles (comme les attributs  srcset  et  tailles  ou même les images   et  source ) 
 A Little Third- Party Help 
 Ces quatre dernières années, j'ai mis à jour un script de chargement paresseux en code source libre intitulé « vanilla-lazyload ». Quelques jours après que Addy Osmani eut écrit sur le chargement paresseux natif , la communauté a réagi en me demandant si mon script pouvait agir comme un remplissage multiple. 
 Comme je l’ai déjà expliqué, vous ne pouvez pas créer de remplissage multiple pour la fonctionnalité de chargement paresseux natif. Cependant, j’ai pensé à une solution qui faciliterait la tâche des développeurs. pour commencer la transition vers le chargement paresseux natif, sans avoir besoin d'écrire le code JavaScript que j'ai 
 À partir de la version 12 de  vanilla-lazyload vous pouvez simplement définir l'option  use_native  sur  true  pour activer le chargement hybride paresseux. Le script ne contient que 2,0 kB compressés et est déjà disponible sur  GitHub  npm  et  jsDelivr . 
 Demos 
 Vous pouvez commencer à jouer avec chargement paresseux natif aujourd'hui en téléchargeant  Chrome Canary  ou  Microsoft Edge Insider  (canal de développement  ) puis en activant les options "Activer le chargement d'images paresseuses" et "Activer le chargement d'images paresseuses" ”. Pour activer ces drapeaux, entrez  à propos de: drapeaux  dans le champ d'adresse URL de votre navigateur et recherchez "paresseux" dans la zone de recherche. 
 Démonstration du chargement paresseux natif 
 Pour analyser le fonctionnement du chargement paresseux natif dans le outils de développement, vous pouvez commencer à jouer avec la démo suivante. Dans celui-ci,  pas une seule ligne de JavaScript n'est utilisée . Oui, il s’agit simplement d’un chargement paresseux natif. 
  À quoi s’attendre : Toutes les images sont récupérées simultanément, mais avec des réponses HTTP différentes. Ceux avec le code de réponse  200  sont les images chargées avec empressement, alors que ceux avec le code de réponse  206  ne sont que partiellement extraits pour obtenir les informations initiales sur les images. Lorsque vous faites défiler l'écran vers le bas, ces images seront complètement récupérées avec un code de réponse  200 . 
 Démonstration de chargement hybride paresseux 
 Pour analyser le fonctionnement du chargement différé hybride, vous pouvez commencer à jouer avec la démo suivante. Ici,  vanilla-lazyload@12.0.0  est utilisé et l'option  use_native  est définie sur  true : 
  À quoi s'attendre  : Essayez la démo sur différents navigateurs pour voir comment elle se comporte. Sur les navigateurs prenant en charge le chargement paresseux natif, le comportement serait le même que dans la démo de chargement paresseux natif. Sur les navigateurs ne prenant pas en charge le chargement paresseux natif, les images seront téléchargées au fur et à mesure que vous faites défiler la page. 
 Veuillez noter que  vanilla-lazyload  utilise l'API IntersectionObserver sous le capot, vous devez donc le polyfiller. sur Internet Explorer et les versions moins récentes de Safari. Ce n'est pas grave si un polyfill n'est pas fourni, cependant, car dans ce cas,  vanilla-lazyload  téléchargerait simplement toutes les images à la fois. 
  Note :  Pour en savoir plus, consultez le chapitre « De Polyfill ou non de Polyfill » du fichier lisezmoi de   vanilla-lazyload . 
 Essayez de charger paresseux hybride dans votre site Web 
 le chargement sera bientôt disponible sur certains navigateurs. Pourquoi ne lui donnez-vous pas une chance aujourd'hui en utilisant le chargement paresseux hybride? Voici ce que vous devez faire: 
 Balisage HTML 
 Le balisage d'image le plus simple est constitué de deux attributs:  src  et  alt . 
 Pour ce qui est ci-dessus. images de pliage, vous devez quitter l’attribut  src  et ajouter l’attribut  loading = "eager" . 


 Pour les images en dessous du pli, vous devez remplacer l'attribut  src  avec l'attribut data  data-src  et ajoutez l'attribut  loading = "paresseux" . 


 Si vous le souhaitez pour utiliser des images sensibles, faites de même avec les attributs  srcset  et  tailles . 


 Si vous préférez utiliser la balise  picture changez le srcset   et  src  également dans les balises  source . 




L'étiquette  peut être également utilisée pour charger sélectivement le format WebP de vos images. 
  Note :  Si vous voulez en savoir plus sur les utilisations de   vanilla-lazyload veuillez lire la section HTML « Mise en route » de son fichier lisez-moi. 
 JavaScript Code 
 Tout d'abord, vous devez inclure  vanilla-lazyload  sur votre site Web 
 Vous pouvez le charger à partir d'un CDN tel que jsDelivr: 

 
 


 Ou vous pouvez l'installer avec npm: 
 npm install vanilla-lazyload @ 12

 Il est également possible d’utiliser un script  asynchrone  à initialisation automatique; chargez-le en tant que module ES à l'aide de  type = "module"  ou chargez-le en tant que AMD à l'aide de RequireJS. Trouvez d'autres moyens d'inclure et d'utiliser  vanilla-lazyload  dans la section de script « Pour commencer » du fichier lisez-moi 
 Ensuite, dans le code JavaScript de votre site Web / application Web, incluez 
 var pageLazyLoad = new LazyLoad ({
    elements_selector: "[loading=lazy]",
    use_native: true // ← active le chargement hybride paresseux
});

  Note :  Le script contient de nombreux autres paramètres que vous pouvez utiliser pour personnaliser le comportement de   vanilla-lazyload par exemple. pour augmenter la distance de la zone de défilement à partir de laquelle commencer le chargement des éléments ou pour ne charger des éléments que s'ils restent dans la fenêtre d'affichage pendant un temps donné. Vous trouverez plus de paramètres dans la section  API du fichier lisez-moi . 
 Tous ensemble, en utilisant un script  asynchrone  
.  script pour optimiser les performances, veuillez vous reporter aux codes HTML et JavaScript suivants: 
















 C’est tout! Avec ces étapes très simples et faciles, vous aurez activé le chargement paresseux hybride sur votre site Web! 
 Bonnes pratiques importantes 

• Appliquez le chargement paresseux uniquement aux images que vous savez qui seront probablement affichées sous le pli. Chargez avec impatience ceux qui se trouvent au-dessus du pli pour optimiser les performances. Si vous appliquez simplement une charge différée à toutes les images de votre page, vous ralentirez les performances de rendu.
• Utilisez CSS pour réserver de l’espace aux images avant leur chargement. De cette façon, ils repousseront le reste du contenu ci-dessous. Si vous ne le faites pas, un plus grand nombre d'images seront placées au-dessus du pli avant qu'elles ne le devraient, ce qui déclenchera des téléchargements immédiats pour elles. Si vous avez besoin d'un truc CSS pour le faire, vous pouvez en trouver un dans la section du fichier Lisezmoi de vanilla-lazyload .

Pour et contre

Enveloppant

Je suis très enthousiaste. ce chargement paresseux natif arrive aux navigateurs, et je suis impatient de l'implémenter par tous les fournisseurs de navigateurs !

Entre-temps, vous pouvez choisir d'enrichir votre balisage HTML pour une amélioration progressive et obtenir chargement paresseux natif uniquement là où il est pris en charge, ou vous pouvez opter pour le chargement paresseux hybride et obtenir un chargement paresseux natif et JavaScript jusqu'à ce que le chargement paresseux natif soit pris en charge par la grande majorité des navigateurs.

Essayez-le! N'oubliez pas de star / watch vanilla-lazyload sur GitHub et laissez-moi savoir vos pensées à cet égard dans la section commentaires.

Pour en savoir plus sur SmashingMag:

(dm, il)