Analyse und Zusammenfassung des verzögerten Ladens und Vorladens von JavaScript-Bildern

In diesem Artikel wird hauptsächlich die Analyse von zwei Technologien vorgestellt: Lazy Loading und Preloading. Werfen wir ohne weiteres einen Blick darauf.

Verzögertes Laden wird auch als verzögertes Laden bezeichnet: Im vorherigen Artikel eingeführt: Verzögertes Laden von JS-Bildern oder Laden bestimmter Bilder nur, wenn bestimmte Bedingungen erfüllt sind.

Vorabladen: Laden Sie Bilder im Voraus und rendern Sie sie direkt aus dem lokalen Cache, wenn der Benutzer sie anzeigen muss.

Das Wesen der beiden Technologien: Das Verhalten der beiden ist gegensätzlich, die eine lädt im Voraus und die andere lädt langsam oder gar nicht. Das verzögerte Laden hat einen gewissen Effekt auf die Entlastung des Server-Front-Ends, während das Vorladen den Druck auf das Server-Front-End erhöht.

Die Bedeutung und Implementierungsmethoden des verzögerten Ladens sind:

Bedeutung: Der Hauptzweck des verzögerten Ladens besteht darin, das Server-Frontend zu optimieren und die Anzahl der Anforderungen zu reduzieren oder die Anzahl der Anforderungen zu verzögern .

Implementierungsmethode:

1. Die erste ist reines verzögertes Laden, wobei setTimeOut oder setInterval für die Ladeverzögerung verwendet wird.

2 startet nur, wenn bestimmte Bedingungen oder bestimmte Ereignisse ausgelöst werden.

3. Der dritte Typ ist das Laden des visuellen Bereichs, was bedeutet, dass nur der Bereich geladen wird, den der Benutzer sehen kann. Dies wird normalerweise durch Überwachung der Bildlaufleiste erreicht Beim Laden eines bestimmten Bildes wird sichergestellt, dass der Benutzer das Bild beim Herunterziehen genau sehen kann.

Die Bedeutung und Implementierungsmethoden des Vorladens sind:

Man kann sagen, dass das Vorladen die Front-End-Leistung des Servers im Austausch für eine bessere Benutzererfahrung opfert, sodass die Vorgänge des Benutzers verbessert werden können so schnell wie möglich reflektiert werden. Es gibt viele Möglichkeiten, das Vorladen zu implementieren, einschließlich CSS (Hintergrund), JS (Bild) und HTML (6ed09268cbdd0015bce8dcbbdfa9bfe4). Üblicherweise wird new Image(); verwendet, dessen SRC so eingestellt wird, dass das Vorladen implementiert wird, und dann die Onload-Methode verwenden, um das Abschlussereignis des Vorladens zurückzurufen. Solange der Browser das Bild lokal herunterlädt, wird derselbe Quellcode zwischengespeichert. Dies ist die einfachste und praktischste Methode zum Vorladen. Wenn Image den Bildheader herunterlädt, erhält es die Breite und Höhe, sodass Sie die Größe des Bildes vor dem Vorladen ermitteln können (die Methode besteht darin, einen Timer zu verwenden, um die Breiten- und Höhenänderungen durchzugehen).

Wie erreicht man eine Vorspannung?

Wir können über Google suchen: Sie können sehen, dass viele Leute diese Methode zum Vorladen verwenden: Der Code lautet wie folgt:

function loadImage(url,callback) {
  var img = new Image();
   
  img.src = url;
  img.onload = function(){
    img.onload = null;
    callback.call(img);
  }
}

Warum andere Browser normal sind: Tatsächlich ist der Grund sehr einfach, das heißt, der Browser-Cache, außer IE6 (das heißt, Opera kann das auch, aber ich habe es speziell mit Opera versucht, nein, es könnte ein Versionsproblem sein, Vielleicht wurde es jetzt behoben) ), andere Browser führen die Onload-Methode erneut aus, wenn sie erneut angeklickt werden, aber IE6 übernimmt sie direkt vom Browser.

Was jetzt tun? Im besten Fall kann das Bild einen Statuswert haben, der angibt, ob es erfolgreich geladen wurde. Da beim Laden aus dem Cache keine Wartezeit besteht, zeigt dieser Statuswert direkt an, dass er heruntergeladen wurde. Beim Laden aus der HTTP-Anfrage wird dieser Wert als unvollständig angezeigt, da er auf den Download warten muss. In diesem Fall ist es machbar. Nach der Suche bei Google werde ich es vorstellen: Ich habe festgestellt, dass es ein Attribut von Image gibt, das mit verschiedenen Browsern kompatibel ist – vollständig. Beurteilen Sie diesen Wert daher einfach vor dem Image-Onload-Ereignis. Schließlich sieht der Code wie folgt aus:

function loadImage(url,callback) {
  var img = new Image();
   
  img.src = url;
 
  if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
     
    callback.call(img);
    return; // 直接返回，不用再处理onload事件
  }
 
  img.onload = function(){
    img.onload = null;
    callback.call(img);
  }
}

Mit anderen Worten: Wenn sich das Bild bereits im Browser-Cache befindet, unterstützt es den direkten Abruf vom Browser-Cache. Führen Sie die Funktion in img.complete aus und kehren Sie zurück. Wir können jedoch den obigen Code sehen: Wir müssen warten, bis das Bild geladen ist, und dann können wir die Rückruffunktion ausführen sagte, dass wir nach dem Laden des Bildes die Bildbreite und -höhe ermitteln können. Was ist, wenn wir die Größe des Bildes im Voraus ermitteln möchten? Die Interneterfahrung sagt mir: Wenn der Browser ein Bild lädt, werden Sie feststellen, dass das Bild zunächst ein Stück Land einnimmt und dann langsam geladen wird. Es ist nicht erforderlich, die Breiten- und Höhenattribute voreinzustellen, da der Browser die Header-Daten abrufen kann das Bild. Auf dieser Grundlage müssen Sie lediglich Javascript verwenden, um regelmäßig den Größenstatus des Bildes zu ermitteln, um den Bereitschaftsstatus der Bildgröße zu ermitteln. Der Code lautet wie folgt: (Aber es gibt eine Prämisse, dass diese Methode weder das ist, was ich dachte, noch der Code, den ich geschrieben habe. Es ist der von Freunden online zusammengefasste Code. Ich weiß nur, dass es ein solches Prinzip gibt)

var imgReady = (function(){
  var list = [],
    intervalId = null;
 
  // 用来执行队列
  var queue = function(){
 
    for(var i = 0; i < list.length; i++){
      list[i].end ? list.splice(i--,1) : list[i]();
    }
    !list.length && stop();
  };
   
  // 停止所有定时器队列
  var stop = function(){
    clearInterval(intervalId);
    intervalId = null;
  }
  return function(url, ready, error) {
    var onready = {},
      width,
      height,
      newWidth,
      newHeight,
      img = new Image();
    img.src = url;
 
    // 如果图片被缓存，则直接返回缓存数据
    if(img.complete) {
      ready.call(img);
      return;
    }
    width = img.width;
    height = img.height;
 
    // 加载错误后的事件
    img.onerror = function () {
      error && error.call(img);
      onready.end = true;
      img = img.onload = img.onerror = null;
    };
 
    // 图片尺寸就绪
    var onready = function() {
      newWidth = img.width;
      newHeight = img.height;
      if (newWidth !== width || newHeight !== height ||
        // 如果图片已经在其他地方加载可使用面积检测
        newWidth * newHeight > 1024
      ) {
        ready.call(img);
        onready.end = true;
      };
    };
    onready();
    // 完全加载完毕的事件
    img.onload = function () {
      // onload在定时器时间差范围内可能比onready快
      // 这里进行检查并保证onready优先执行
      !onready.end && onready();
      // IE gif动画会循环执行onload，置空onload即可
      img = img.onload = img.onerror = null;
    };
     
     
    // 加入队列中定期执行
    if (!onready.end) {
      list.push(onready);
      // 无论何时只允许出现一个定时器，减少浏览器性能损耗
      if (intervalId === null) {
        intervalId = setInterval(queue, 40);
      };
    };
  }
})();

Die Aufrufmethode ist wie folgt:

imgReady('http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg',function(){
　　alert('width:' + this.width + 'height:' + this.height);
});

Das Obige ist der gesamte Inhalt dieses Artikels