Exemple de tutoriel d'implémentation du chargement paresseux d'images basé sur JS

Le chargement paresseux d'images est également une méthode relativement courante d'optimisation des performances. Cet article présente principalement des exemples de chargement paresseux d'images à l'aide de JS natif. Le code détaillé est compilé ici. Les amis dans le besoin peuvent s'y référer

Préface

Le chargement paresseux des images est également une méthode courante d'optimisation des performances. Récemment, j'utilisais Vue pour créer un client de liste d'actualités. . Voici une brève introduction au principe de mise en œuvre et à une partie du code.

Principe de mise en œuvre

Lors du chargement de la page, les images ont toujours été la principale source de trafic, et il existe de nombreuses méthodes de performance pour les images, comme base64, images Sprite, etc. ; le chargement paresseux en fait également partie. Le principe principal est de définir le src de l'image non affichée sur le premier écran à une valeur par défaut, puis de surveiller le défilement de la fenêtre, puis de lui attribuer une valeur par défaut. adresse d'image réelle lorsque l'image apparaît dans la fenêtre. Cela peut garantir la vitesse de chargement du premier écran, puis charger les images à la demande.

Code spécifique

Tout d'abord, lors du rendu, l'image fait référence à l'image par défaut, puis la véritable adresse est placée au-dessus des attributs data-*.

<image src=&#39;./../assets/default.png&#39; :src=&#39;item.allPics&#39; class=&#39;lazyloadimg&#39;>

Ensuite, pour surveiller le défilement, utilisez simplement window.onscroll, mais une chose à noter est que cela est similaire au défilement et au redimensionnement de la fenêtre pour les événements. tels que les déplacements de souris qui se déclenchent fréquemment, il est préférable d'utiliser la limitation ou l'anti-rebond pour contrôler la fréquence de déclenchement. Il existe deux méthodes d’encapsulation dans le trait de soulignement et le lodash, je ne les présenterai donc pas en détail ici.

L'étape suivante consiste à déterminer si l'image apparaît dans la fenêtre, principalement en fonction de trois hauteurs : 1. Jusqu'où le corps actuel a défilé depuis le haut. 2. La hauteur de la fenêtre. 3. La distance entre l'image actuelle et le haut. Le code spécifique est le suivant :

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
  var bodyScrollHeight = document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
  var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度
  if (imgHeight < windowHeight + bodyScrollHeight) {
   imgs[i].src = imgs[i].getAttribute(&#39;src&#39;);
   img[i].className = img[i].className.replace(&#39;lazyloadimg&#39;,&#39;&#39;)
  }
  }
 }

Conclusion

C'est à peu près tout , je pourrai ajouter l'implémentation du code source de limitation anti-secousse la prochaine fois. Enfin, deux jugements de défilement courants sont ajoutés :

1. La page défile en s'éloignant de l'écran d'accueil (à ce moment, le bouton pour revenir en haut peut être affiché) :

document.body.scrollTop > window.innerHeight2. Faites défiler la page vers le bas (vous pouvez ajuster l'interface pour obtenir plus de contenu à ce moment-là) :

window.scrollY + window.innerHeight > document.body.offsetHeightCe qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas. utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra Script Home.

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!