Implementierungsmethoden und Ideen für das verzögerte Laden von Javascript-Bildern_Javascript-Fähigkeiten

Das Beispiel in diesem Artikel stellt vor, wie Sie das Laden von Bildern über Javascript verzögern können, und stellt es Ihnen als Referenz zur Verfügung. Der spezifische Inhalt ist wie folgt:

Wenn eine Webseite eine große Anzahl von Bildern enthält und alle Bilder zu Beginn geladen werden, führt dies unweigerlich zu Leistungs- und Effizienzproblemen, und Benutzer verlassen die Seite möglicherweise aufgrund langer Wartezeiten.

Zu diesem Zeitpunkt müssen wir Lazy Loading verwenden, dh das verzögerte Laden von Bildern, um die Affinität der Website zu verbessern.

1. Lazy Loading von Bildern

Die Grundidee ist wie folgt:
Legen Sie benutzerdefinierte Attribute wie lazy-src für Bilder fest, die verzögert geladen werden müssen, und der Pfad zur Bildquelle ist vorhanden. Fügen Sie dann alle Bilder, die verzögert geladen werden müssen, in ein Array ein. Wenn window.onscroll verwendet wird, wird beurteilt, ob der Inhalt des Arrays für den Benutzer sichtbar ist. Wenn er angezeigt wird, wird der Inhalt des benutzerdefinierten Attributs dem src zugewiesen Attribut des Bildes.

Lassen Sie uns über die Umsetzungsschritte im Detail sprechen.
Zuerst müssen wir eine Funktion definieren, die die Position des sichtbaren Bereichs des Browsers zurückgibt:

  /**
   * @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};
   }

Dann definieren Sie eine Funktion, um den Speicherort der zu ladenden Ressource zurückzugeben:

/**
   * @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};
   }

Als nächstes definieren Sie eine Funktion, um zu bestimmen, ob sich zwei rechteckige Flächen schneiden:

  /**
   * @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;
   }

Überwachen Sie abschließend die Bildressourcen und laden Sie die Ressourcen, wenn sie in das Sichtfeld des Benutzers gelangen:

   /**
   * @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];
        }
      }
    }
   }

Natürlich ist dies nur eine Idee, wenn es in der Technik verwendet wird, gibt es immer noch viele Mängel, wie z. B. Leistung und Kompatibilität. Daher empfehle ich ein JQuery-Plugin: lazyload

1. Stellen Sie fest, dass das Laden des CSS abgeschlossen ist

Hier erfahren Sie übrigens, wie Sie beurteilen können, ob die CSS-Datei einer Webseite geladen wurde. Wir wissen, dass CSS über eine externe Datei eingeführt wird, bei der es sich tatsächlich um einen Linkknoten handelt. Wir müssen also nur das Sheet-Attribut oder das Sheet.cssRules-Attribut des Link-Knotens abfragen, um festzustellen, ob die CSS-Datei vollständig erfolgreich geladen wurde.

2. Bestimmen Sie, ob das Bild geladen ist

In ähnlicher Weise verfügt das img-Tag über ein vollständiges Attribut, und wir müssen nur eine Umfrage durchführen, um dieses Attribut anzuzeigen.

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

3. Stellen Sie fest, dass Javascript geladen ist

Wie kann man also beurteilen, ob Javascript geladen ist? Die Onload-Methode des Skriptknotens wird ausgeführt, nachdem der Ladevorgang abgeschlossen ist. IE6 und IE7 können anhand von readyState beurteilt werden:

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;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.