Introduction à la méthode de chargement paresseux des images à l'aide de JavaScript

Le chargement paresseux des images, également appelé chargement différé des images et chargement paresseux, signifie que les images sont chargées lorsque les utilisateurs ont besoin de les utiliser. Cela peut réduire les demandes, économiser la bande passante et augmenter la vitesse de chargement des pages. pression du serveur. Ce qui suit est passé. Cet article partagera avec vous la méthode de mise en œuvre du chargement paresseux des images. Les amis intéressés devraient y jeter un œil ensemble

Définition.

Le chargement paresseux des images est également appelé chargement différé et le chargement paresseux des images signifie le chargement des images lorsque les utilisateurs ont besoin de les utiliser. Cela peut réduire les demandes, économiser la bande passante, augmenter la vitesse de chargement des pages et, par conséquent, réduire la pression du serveur. .

Le chargement paresseux est une manifestation de l'humanisation du programme. Il améliore l'expérience utilisateur et empêche le chargement de grandes quantités de données en même temps, il effectue des demandes de ressources en fonction des besoins de l'utilisateur.

La difficulté dans la mise en œuvre du

chargement paresseux est de déterminer si une certaine image est une ressource dont l'utilisateur a besoin dans le navigateur, de quoi. l'utilisateur a besoin de ressources dans la zone visuelle, il nous suffit donc de déterminer si l'image a été présentée dans la zone visuelle, lorsque l'image est présentée dans la zone visuelle, obtenir l'adresse réelle de l'image et l'attribuer à l'image. (la largeur et la hauteur de l'image doivent être spécifiées et peuvent être traitées par remplissage).

Déterminer si elle existe dans la zone visible

Hauteur de la fenêtre du navigateur

La distance entre la ressource à charger et le haut de la fenêtre

Juste passez les deux points ci-dessus. Déterminez si l'image se trouve dans la zone visible.

var nodes = document.querySelectorAll('img[src]'),
  elem = nodes[0],
  rect = elem.getBoundingClientRect(),
  vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
 console.log(&#39;show&#39;)
}

Obtenir la véritable adresse de la photo

<img src="loading.gif" alt="" src="1.gif">
...
<script data-filtered="filtered">
  var src = elem.dataset.src;
</script>

Attribuer la véritable adresse à la photo

var img = new Image();
img.onload = function(){
 elem.src = img.src;
}
img.src = src;

Code complet

var scrollElement = document.querySelector('.page'),
  viewH = document.documentElement.clientHeight;
function lazyload(){
 var nodes = document.querySelectorAll('img[src]');
 Array.prototype.forEach.call(nodes,function(item,index){
  var rect;
  if(item.dataset.src==='') return;
  rect = item.getBoundingClientRect();
  if(rect.bottom>=0 && rect.top < viewH){
    (function(item){
     var img = new Image();
     img.onload = function(){
      item.src = img.src;
     }
     img.src = item.dataset.src
     item.dataset.src = &#39;&#39;
    })(item)
  }
 })
}
lazyload();
scrollElement.addEventListener(&#39;scroll&#39;,throttle(lazyload,500,1000));
function throttle(fun, delay, time) {
  var timeout,
    startTime = new Date();
  return function() {
    var context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    if (curTime - startTime >= time) {
      fun.apply(context, args);
      startTime = curTime;
    } else {
      timeout = setTimeout(fun, delay);
    }
  };
};

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!