Comment charger paresseux des images / vidéos / autres contenus volumineux en javascript?
Avant de plonger profondément dans le chargement paresseux d'images, nous devons d'abord bien connaître le chargement paresseux. Nous devrions avoir la réponse que ce qui est exactement chargement paresseux?
Beaucoup d’entre vous ont sûrement déjà entendu dire que Google Chrome ajoutera le chargement différé de manière native avec les balises HTML, pour les images et les iframes.
Ce que signifie fondamentalement Lazy Loading, c’est de ne pas charger le contenu de ces images ou vidéos, ni aucun contenu de ce type qui prend un certain temps, jusqu’à ce que l’utilisateur ne les ait pas dans le champ de vision. De cette manière, une image (pour cet article) située à la fin de la page Web ne sera jamais chargée si l'utilisateur n'atteint pas ce point. Avec cette solution, nous gagnons du temps de chargement et gagnons en vitesse.
Notre apparence HTML
Vous trouverez ci-dessous notre fichier index.html. Il a juste un titre, un spinner de chargement et un div vide où nous allons mettre toutes les images de l'API.
Chargement des images paresseux </ title> <link rel = "stylesheet" href = "style.css" /> </ head> <body> <h1> Chargement des images paresseux </ h1> <! - Conteneur d'images -> <div id = "imagesContainer"> </ div> <! - Chargement de spinner -> <div class = "lds-roller" id = "lds-roller"> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <div> </ div> </ div> <! - Notre code JS personnalisé -> <script src = "main.js"> </ script> </ body> </ html></pre><p>À ce stade, notre page est vide, permet de charger nos images maintenant de manière paresseuse et de créer notre fichier main.js pour la compilation du code js.</p><p>MAINTENANT D'ICI LA MAGIE COMMENCE</p><pre>window.onload = () => { // Obtenir 30 images aléatoires fetch ('https://picsum.photos/v2/list?limit=30') .then (fonction (réponse) { return response.json (); }) .then (function (myJson) { // Appelez la fonction createImages pour générer le code HTML. createImages (myJson); // Retirer le spinner de chargement document.getElementById ('lds-roller'). remove (); }) .catch (err => { console.log (err); }); };</pre><p>Cette première fonction sera déclenchée lorsque la fenêtre est prête. Nous utilisons l’API de récupération ou nous pouvons également utiliser axios api également pour obtenir les images à partir d’une API externe. (Axios et Fetch ont leurs propres documentations sur https://www.npmjs.com/package/). Cette API nous répond avec un fichier JSON contenant toutes les URL des images. Avec cette URL, nous pouvons maintenant créer notre code HTML.</p><pre>fonction createImages (imgs) { pour (laissez-moi d'imgs) { // Créer une balise HTML image avec js DOM const image = document.createElement ('img'); image.setAttribute ('data-lazy', i.download_url); image.classList.add ('chargement paresseux'); document.getElementById ('imagesContainer'). appendChild (image); } // Définit un observateur pour chaque image lazyTargets = document.querySelectorAll ('. lazy-loading'); lazyTargets.forEach (lazyLoad); }</pre><p>Notez que nous ne définissons pas l'attribut src des images. Nous créons un attribut «data-paresseux» pour identifier de manière unique le composant paresseux. De cette façon, les images ne demandent aucune donnée lors de leur création. Faisons maintenant la fonction de chargement paresseux. Cette fonction utilisera l’API Observateur d’intersection pour savoir quand chaque image est affichée. Pour “intersection-observateur”, vous pouvez vous référer à la documentation de npm sur le lien https://www.npmjs.com/package/intersection-observer. Ensuite, il remplacera l'attribut src par l'attribut paresseux.</p><pre>fonction lazyLoad (cible) { // utilisation du package IntersectionObserver const obs = new IntersectionObserver ((entrées, observateur) => { entries.forEach (entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.getAttribute ('data-lazy'); img.setAttribute ('src', src); img.classList.add ('fadeIn'); observer.disconnect (); } }); }); obs.observe (cible); }</pre><p>Vous pouvez rendre cela joli en créant un fichier .html pour Outlook et un fichier .css à des fins de style.</p><p>Pour le code codepan, veuillez consulter https://codepen.io/vishalvishalgupta/pen/NVqQPG</p><p>Merci d'avoir lu… HAPPY JAVASCRIPT….</p></div><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/question/how-to-enable-gpu-acceleration-in-adobe-premiere-pro-cc-2018/" title="comment activer l'accélération gpu dans adobe premiere pro cc 2018">comment activer l'accélération gpu dans adobe premiere pro cc 2018</a><a href="/question/how-to-get-your-boyfriend-to-forgive-you-for-cheating/" title="comment faire en sorte que votre petit ami vous pardonne d'avoir triché">comment faire en sorte que votre petit ami vous pardonne d'avoir triché</a><a href="/question/how-to-make-a-round-box/" title="comment faire une boîte ronde">comment faire une boîte ronde</a><a href="/question/how-to-use-a-lanyard/" title="comment utiliser un cordon">comment utiliser un cordon</a><a href="/question/how-to-awaken-your-twin-flame/" title="comment réveiller votre flamme jumelle">comment réveiller votre flamme jumelle</a><a href="/question/how-to-glue-sand-to-cardboard/" title="comment coller du sable sur du carton">comment coller du sable sur du carton</a><a href="/question/how-to-say-kill-them-all-in-german/" title="comment dire tuez-les tous en allemand">comment dire tuez-les tous en allemand</a><a href="/question/how-to-send-pictures-on-ebay/" title="comment envoyer des photos sur ebay">comment envoyer des photos sur ebay</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/article/how-to-help-your-child-love-reading-192060/" title="Comment aider votre enfant à aimer lire">Comment aider votre enfant à aimer lire</a><a href="/article/how-to-drink-with-russians-55c2c4/" title="Comment boire avec les Russes">Comment boire avec les Russes</a><a href="/article/how-to-compete-with-robots-in-the-age-of-artificial-intelligence-part-1-472d2f/" title="Comment rivaliser avec les robots à l'ère de l'intelligence artificielle [Partie 1]">Comment rivaliser avec les robots à l'ère de l'intelligence artificielle [Partie 1]</a><a href="/article/choosing-mobile-hybrid-frameworks-react-native-vs-ionic-161e12/" title="Choix de cadres hybrides mobiles: React.Native vs Ionic">Choix de cadres hybrides mobiles: React.Native vs Ionic</a><a href="/article/how-to-change-your-life-my-personal-development-playbook-087018/" title="Comment changer de vie: Mon livre de développement personnel">Comment changer de vie: Mon livre de développement personnel</a><a href="/article/how-to-reduce-the-mobile-app-development-cost-650142/" title="Comment réduire les coûts de développement des applications mobiles?">Comment réduire les coûts de développement des applications mobiles?</a><a href="/article/how-to-break-bad-habits-according-to-science-c4daaa/" title="Comment briser les mauvaises habitudes, selon la science.">Comment briser les mauvaises habitudes, selon la science.</a><a href="/article/how-to-setup-an-effective-coding-test-a-guide-for-hiring-managers-2493bb/" title="Comment mettre en place un test de codage efficace (un guide pour les responsables du recrutement)">Comment mettre en place un test de codage efficace (un guide pour les responsables du recrutement)</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="in flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="fi flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-lazy-load-images-in-javascript-bd23ea/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>