js implémente le chargement différé des images de pages Web pour améliorer les compétences d'ouverture de pages Web speed_javascript

Il existe de nombreuses façons d'améliorer la vitesse de chargement des pages Web. Utiliser jquery.lazyload.js pour implémenter le chargement paresseux asynchrone des images sera une bonne méthode pour améliorer la vitesse d'ouverture des pages Web pour les sites Web contenant beaucoup d'images. la page. Sur le côté gauche de la liste des colonnes du site Code Jun, vous pouvez voir un module d'affichage des vignettes de l'article lors de la prévisualisation sur le PC, ce qui prolongera dans une certaine mesure le temps de chargement de la page Web. Cet article utilise la méthode de chargement différé asynchrone des images pour améliorer la vitesse de chargement des pages de ce site Web.

Les images sont chargées de manière asynchrone, ce qui signifie qu'il n'est pas nécessaire de charger et d'afficher toutes les images sur la page en même temps. Lorsque l'utilisateur fait glisser la barre de défilement vers une certaine position, l'image à la position correspondante sera chargée et. affiché. Cela peut grandement améliorer la vitesse de chargement de la page Web.

Il existe de nombreux articles techniques avec beaucoup d'images. Si toutes les images doivent être chargées en même temps lors de l'ouverture de la page Web, l'utilisateur devra certainement attendre très longtemps. Cette approche rendra l'expérience utilisateur très mauvaise et il n'est pas nécessaire de charger toutes les images de la page en même temps. Le chargement paresseux asynchrone des images est l’approche la plus raisonnable et la plus appropriée en matière de conception Web.

Nous utilisons jquery.lazyload.js pour implémenter le chargement paresseux asynchrone des images. N'oubliez pas de charger jQuery en premier.

1. Importer le plug-in JS :

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.lazyload.js"></script>

2. Insérez le code JavaScript dans la page :

$(document).ready(function($){
$("img").lazyload({
placeholder:"grey.gif", //加载图片前的占位图片
effect:"fadeIn" //加载图片使用的效果(淡入)
});
});

Grâce aux deux étapes ci-dessus, vous pouvez facilement mettre en œuvre un chargement différé asynchrone des images de pages Web.

Laissez-moi vous présenter une introduction détaillée :
Parfois, nous voyons certains grands sites Web. Si la page contient de nombreuses images, lorsque vous faites défiler jusqu'à la ligne correspondante, les images de la ligne actuelle sont chargées immédiatement. De cette façon, lorsque la page est ouverte, seules les images de la zone visible le sont. ajoutées et les autres images ne sont pas ajoutées. Les images masquées ne sont pas chargées, ce qui accélère le chargement des pages.

Recommandé : Utilisez le plug-in de chargement différé d'image jquery jquery.lazyload pour obtenir un délai d'image

Principe de mise en œuvre :

Modifiez toutes les images nécessitant un chargement différé au format suivant :

<img lazy_src="图片路径" border="0"/>

Ensuite, lorsque la page se charge, enregistrez toutes les images en utilisant lazy_src dans un tableau, puis calculez le haut de la zone visible lors du défilement, puis réduisez le haut des images à chargement retardé par rapport à la zone visible actuelle (c'est-à-dire la image La valeur src de l'image apparaissant dans la zone visible est remplacée par lazy_src (charger l'image) :

Code JS :

 lazyLoad = (function() {
 
  var map_element = {};
 
  var element_obj = [];
 
  var download_count = 0;
 
  var last_offset = -1;
 
  var doc_body;
 
  var doc_element;
 
  var lazy_load_tag;
 
  function initVar(tags) {
 
    doc_body = document.body;
 
    doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
 
    lazy_load_tag = tags || ["img", "iframe"];
 
  };
 
  function initElementMap() {
 
    var all_element = [];
 
    //从所有相关元素中找出需要延时加载的元素
 
    for (var i = 0,
 
len = lazy_load_tag.length; i < len; i++) {
 
      var el = document.getElementsByTagName(lazy_load_tag[i]);
 
      for (var j = 0,
 
len2 = el.length; j < len2; j++) {
 
        if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
 
          element_obj.push(all_element[key]);
 
        }
 
      }
 
    }
 
  
 
    for (var i = 0,
 
len = element_obj.length; i < len; i++) {
 
      var o_img = element_obj[i];
 
      var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
 
      if (map_element[t_index]) {
 
        map_element[t_index].push(i);
 
      } else {
 
        //按距上距离保存一个队列
 
        var t_array = [];
 
        t_array[0] = i;
 
        map_element[t_index] = t_array;
 
        download_count++; //需要延时加载的图片数量
 
      }
 
    }
 
  
 
  };
 
  function initDownloadListen() {
 
    if (!download_count) return;
 
    var offset = (window.MessageEvent && !document.getBoxObjectFor) &#63; doc_body.scrollTop : doc_element.scrollTop;
 
    //可视化区域的offtset=document的高+
 
    var visio_offset = offset + doc_element.clientHeight;
 
    if (last_offset == visio_offset) {
 
      setTimeout(initDownloadListen, 200);
 
      return;
 
    }
 
    last_offset = visio_offset;
 
    var visio_height = doc_element.clientHeight;
 
    var img_show_height = visio_height + offset;
 
    for (var key in map_element) {
 
      if (img_show_height > key) {
 
        var t_o = map_element[key];
 
        var img_vl = t_o.length;
 
        for (var l = 0; l < img_vl; l++) {
 
          element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
 
        }
 
        delete map_element[key];
 
        download_count--;
 
      }
 
    }
 
    setTimeout(initDownloadListen, 200);
 
  };
 
  function getAbsoluteTop(element) {
 
    if (arguments.length != 1 || element == null) {
 
      return null;
 
    }
 
    var offsetTop = element.offsetTop;
 
    while (element = element.offsetParent) {
 
      offsetTop += element.offsetTop;
 
    }
 
    return offsetTop;
 
  }
 
  function init(tags) {
 
    initVar(tags);
 
    initElementMap();
 
    initDownloadListen();
 
  };
 
  return {
 
    init: init
 
  }
 
})();

Comment utiliser : Changez le src de l'image qui doit être chargée avec retard sur la page en lazy_src, puis placez le js ci-dessus à la fin du corps, puis appelez : lazyLoad.init ();
La méthode de teasing peut utiliser Firebug pour vérifier si le chargement de l'image temporaire est retardé.
Aussi :
S'il y a une colonne avec un changement de contenu sur votre page, les images du contenu peuvent ne pas s'afficher lors du changement. La solution est de charger les images séparément pendant le contenu, comme :
.

///切换内容的代码…
 
 chlid.find("img[init_src]").each(function(){
 
  $(this).attr("src",$(this).attr("init_src"));
 
  $(this).removeAttr("init_src");
 
 });

Le soi-disant chargement asynchrone des images signifie que vous n'avez pas besoin de charger toutes les images en même temps. Vous pouvez l'appeler chargement différé ou chargement en mémoire tampon.

Voyons si vous avez ce besoin : il y a beaucoup d'images dans un article. Si vous chargez toutes les images lors du chargement de l'article, cela ralentira sans doute la vitesse de chargement et fera attendre l'utilisateur plus longtemps. souhaitez trouver un tel article. Un plug-in qui permet à la page Web de charger uniquement les images dans le champ de vision du navigateur. Les images qui n'apparaissent pas dans la plage ne seront pas chargées temporairement et seront chargées progressivement lorsque l'utilisateur fera glisser le curseur. la barre de défilement. lazyload est utilisée pour obtenir cet effet.
Lazyload.js est en fait un plug-in pour jQuery. Son nom complet est jquery.lazyload.js. Vous pouvez connaître sa fonction simplement en regardant son nom - cela signifie un chargement paresseux. Puisqu’il est écrit en javascript, il convient à toutes les pages Web, y compris WordPress.

Si vous souhaitez utiliser lazyload, vous devez d'abord charger jQuery, qui s'appuie sur jQuery pour obtenir des effets.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que tout le monde a une compréhension plus approfondie de js pour implémenter le chargement différé des images de pages Web.