Que signifie le chargement paresseux des images ? Comment implémenter le chargement paresseux des images

Le contenu de cet article porte sur ce que signifie le chargement paresseux des images ? La méthode de mise en œuvre du chargement paresseux des images a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

Le chargement dit paresseux est un moyen d'améliorer la vitesse d'ouverture des pages Web et d'obtenir une meilleure expérience utilisateur. Les parties importantes de la sélection sont chargées en premier, et les parties les moins importantes sont chargées en cas de besoin. Par exemple, sur un site e-commerce, le premier écran comporte généralement beaucoup de données, une bannière ou un carrousel en haute définition. Dans la partie de la page qui ne s'affiche pas sur le premier écran, de nombreux produits des membres sont mélangés à un grand nombre d'images. C’est alors qu’il est important de choisir un chargement paresseux pour garantir la fluidité du premier écran.

Cet article n'est qu'un exemple simple de chargement paresseux d'images. Il s'agit d'un chapitre d'introduction à l'optimisation des performances. La méthode est relativement simple et claire. Tant que vous avez des bases en js, vous pourrez le faire. comprends-le.

Fin de bêtises

<img  alt="Que signifie le chargement paresseux des images ? Comment implémenter le chargement paresseux des images" >

Tout d'abord, les attributs class="img-delay" et src sont ajoutés aux images qui ne sont pas sur le premier écran. Ce dernier sert à placer. l'adresse url d'origine de l'image. Attribut, pour l'attribut src de l'image elle-même, vous pouvez choisir de le laisser vide, ou d'ajouter une image de rappel indiquant que "l'image ne peut pas être affichée", comme Tmall :

Ce qu'il faut faire après, c'est afficher l'image partout où l'utilisateur fait défiler (il vaut mieux l'afficher un peu à l'avance, on ne le fera pas à l'avance ici)

//首先你需要引入一个 jQuery 库

//获取需要延迟加载的图片
var $picDelay = $(".img-delay");

//在 window 上监听滑动事件
$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();    //滑块划过的距离
  var screenHeight = screen.height;     //屏幕浏览器内容部分的高度

  //计算每个图片的位置是否符合要求
  $picDelay.each(function(idx, ele){
    var $ele = $(ele);
    //当scrollTop + screenHeight === ele.offsetTop时图片刚好出现上边沿
    if(scrollTop + screenHeight >= ele.offsetTop){
      $ele.attr("src", $ele.attr("src")).removeAttr('src').removeClass("img-delay");
    }
  });

  //当所有图片都加载了以后，移除这个事件
  if($(".img-delay").length <p>Recommandations associées : </p><p><a href="http://www.php.cn/js-tutorial-388508.html" target="_self">Élaborer sur le chargement et le préchargement paresseux des images</a><br></p><p><a href="http://www.php.cn/php-weizijiaocheng-337244.html" target="_self">méthode de capture de boucles de php de chargement paresseux des images, merci de me donner quelques conseils</a></p><p class="comments-box-content"></p>

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!