Méthodes de mise en œuvre et idées pour le chargement paresseux des compétences javascript images_javascript

L'exemple de cet article présente comment retarder le chargement des images via javascript et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

.

Lorsqu'une page Web contient un grand nombre d'images, si toutes les images sont chargées au début, cela entraînera inévitablement des problèmes de performances et d'efficacité, et les utilisateurs pourront quitter la page en raison d'un long temps d'attente.

À l'heure actuelle, nous devons utiliser le chargement différé, c'est-à-dire le chargement différé des images, pour améliorer l'affinité du site Web.

1. Chargement paresseux des images

L'idée de base est la suivante :
Définissez des attributs personnalisés tels que lazy-src pour les images qui doivent être chargées paresseusement et le chemin d'accès à la source de l'image existe. Ensuite, placez toutes les images qui doivent être chargées paresseusement dans un tableau Lorsque window.onscroll est utilisé, il est jugé si le contenu du tableau apparaît à la vue de l'utilisateur. S'il apparaît, le contenu de l'attribut personnalisé est attribué au src. attribut de l'image.

Parlons des étapes de mise en œuvre en détail.
Tout d’abord, nous devons définir une fonction qui renvoie la position de la zone visible du navigateur :

  /**
   * @description: 返回浏览器的可视区域位置
   * @return: left:左滑轮距离，top：上滑轮距离，width：可见区域宽度，height：可见区域长度
   */
   function getClient(){
    var l,t,w,h;
    l = document.documentElement.scrollLeft||document.body.scrollLeft;
    t = document.documentElement.scrollTop||document.body.scrollTop;
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    return {left:l,top:t,width:w,height:h};
   }

Définissez ensuite une fonction pour renvoyer l'emplacement de la ressource à charger :

/**
   * @description: 返回待加载资源位置
   * @params: p:需要加载的资源节点
   * @return: left:左边距离，top：上边距离，width：宽度，height：高度
   */
   function getSubClient(p){
    var l = 0, t = 0, w, h;
    w = p.offsetWidth;
    h = p.offsetHeight;
    while(p.offsetParent){
      l += p.offsetLeft;
      t += p.offsetTop;
      p = p.offsetParent;
    } 
    return {left:l,top:t,width:w,height:h};
   }

Définissez ensuite une fonction pour déterminer si deux zones rectangulaires se coupent :

  /**
   * @decription: 判断两个矩阵是否相交，返回一个布尔值
   * @params: rec1,rec2:需要比较的节点矩阵
   * @return: true： 两矩阵相交
   */
   function contains(rec1,rec2){
    var lc1,lc2,tc1,tc2,w1,h1;
    lc1 = rec1.left + rec1.width/2;
    lc2 = rec2.left + rec2.width/2;
    tc1 = rec1.top + rec1.height/2;
    tc2 = rec2.top + rec2.height/2;
    w1 = (rec1.width + rec2.width)/2;
    h1 = (rec1.height + rec2.height)/2;
    return Math.abs(lc1 - lc2)<w1&&Math.abs(tc1 - tc2)<h1;
   }

Enfin, surveillez les ressources d'image et chargez les ressources si elles entrent dans le champ de vision de l'utilisateur :

   /**
   * @description: 资源出现在视野中再加载.将资源放入一个数组。
   */
   var arr = document.getElementsByClassName("divX");
   window.onscroll = function(){
    var prec1 = getClient();
    var prec2;
    for(var i = arr.length-1;i>=0;i--){
      if(arr[i]){
        prec2 = getSubClient(arr[i]);
        if(contains(prec1,prec2)){
          //加载资源
          console.log(arr[i].id);
          arr[i].childNodes[0].src = arr[i].childNodes[0].getAttribute("lazy_src");
          delete arr[i];
        }
      }
    }
   }

Bien sûr, ce n'est qu'une idée. S'il est utilisé en ingénierie, il présente encore de nombreux défauts, tels que les performances et la compatibilité. Je recommande donc un plug-in jquery : lazyload

1. Déterminez que le chargement du CSS est terminé

Au fait, voici comment juger si le fichier css d'une page web a été chargé. Nous savons que le CSS est introduit via un fichier externe, qui est en fait un nœud de lien. Il nous suffit donc d'interroger l'attribut sheet ou l'attribut sheet.cssRules du nœud de lien pour déterminer si le fichier CSS est complètement chargé avec succès.

2. Déterminez si l'image est chargée

De même, la balise img a un attribut complet, et il suffit d'interroger pour afficher cet attribut.

 function imgLoad(img, callback) {
      var timer = setInterval(function() {
        if (img.complete) {
          callback(img)
          clearInterval(timer)
        }
      }, 50)
    }
    imgLoad(img1, function() {
      p1.innerHTML('加载完毕')
    })

3. Déterminez que javascript est chargé

Alors comment juger que javascript est chargé ? La méthode onload du nœud de script est exécutée une fois le chargement terminé. IE6 et IE7 peuvent être jugés par readyState :

function include_js(file) {
  var _doc = document.getElementsByTagName('head')[0];
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', file);
  _doc.appendChild(js);
  if (!/*@cc_on!@*/0) { //if not IE
    //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
    js.onload = function () {
      alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
    }
  } else {
    //IE6、IE7 support js.onreadystatechange
    js.onreadystatechange = function () {
      if (js.readyState == 'loaded' || js.readyState == 'complete') {
        alert('IE6、IE7 support js.onreadystatechange');
      }
    }
  }
  return false;
}

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.