Avantages du chargement paresseux des images :
Améliorez l'expérience utilisateur
Optimisez le code
Réduire les requêtes http ;
Réduire la pression côté serveur ;
Chargement à la demande du serveur
Principe du chargement paresseux des images :
Définissez d'abord le src de l'image sur la même image ou ne la définissez pas, et définissez un attribut spécial pour la balise img, par exemple : data-src est utilisé pour stocker le véritable aperçu adresse de l'image ; si l'image n'entre pas dans la zone visible, affiche la même image ou n'affiche pas l'image directement, aucune requête http ne se produira à ce moment-là. Lorsque l'image entre dans la zone visible, la valeur sur data-src est. attribué à src, puis la requête http est envoyée.
Clé : Déterminer si l'image entre dans la zone visible (fonction clé)
Largeur de la zone visible de la page : document.body.clientWidth
Web page Hauteur de la zone visible : document.body.clientHeight;
Largeur de la zone visible de la page Web : document.body.offsetWidth (y compris la largeur du bord
Hauteur de la zone visible de la page Web : document) ; .body.offsetHeight ( Y compris la largeur du bord);
Largeur du texte intégral du corps de la page Web : document.body.scrollWidth ;
Hauteur du texte intégral du corps de la page Web : document. .body.scrollHeight;
La page Web défile La hauteur de la page : document.body.scrollTop
Le côté gauche de la page en cours de défilement : document.body.scrollLeft; partie gauche : window.screenLeft ;
Hauteur de la résolution de l'écran : window.screen.height;
Largeur de la résolution de l'écran : window.screen.width ; height: window.screen.availHeight;
La distance de l'élément actuel par rapport au haut de son élément offsetParent : HTMLElement.offsetTop;
Hauteur de la fenêtre du navigateur (en pixels) : window.innerHeight; (inclut également la hauteur de la barre de défilement s'il y a une barre de défilement horizontale)
(tutoriel recommandé :
tutoriel js)
Implémentation du code : partie html<div> <img src="./img/1.jpg" data-src="./img/1.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/2.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/3.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/4.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/5.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/6.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/7.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/8.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/9.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/10.jpg" alt=""> </div>
window.onload = () => { // 获取某节点与浏览器顶部的距离 function getTop(e) { if (!e) return return e.offsetTop } let imgs = document.getElementsByTagName('img') function lazyLoading(imgs) { // 可是区域高度 let innerHeight = window.innerHeight; // 滚动区域高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < imgs.length; i++) { // 图片距离顶部的距离大于可视区域和滚动区域之和时加载 if (scrollTop + innerHeight > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src') } } } lazyLoading(imgs) window.onscroll = () => { lazyLoading(imgs) } }
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!