Exemple de chargement paresseux d'images à l'aide de javascript

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, si nécessaire, amis, vous pouvez. reportez-vous à la

Préface

Le chargement paresseux des images est également une méthode d'optimisation des performances relativement courante. J'utilise récemment Vue pour en créer une. . Il est également utilisé dans le client de la 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 est cité Image par défaut, puis mettez la véritable adresse sur l'attribut 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 le défilement et le redimensionnement similaires à la fenêtre, et les événements tels que mousemove qui sont déclenchés fréquemment , il Il est préférable d'utiliser la fonction d'étranglement ou d'anti-secousse (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;)
  }
  }
 }

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!