Explication détaillée du principe de mise en œuvre du chargement paresseux des images en js

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>

partie js

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(&#39;data-src&#39;)
     }
    }
   }
   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!