Einführung in die Lazy-Loading-Methode von Bildern mit JavaScript

Bildverzögertes Laden wird auch als verzögertes Laden von Bildern bezeichnet. Dies bedeutet, dass Bilder dann geladen werden, wenn Benutzer sie verwenden müssen. Dadurch können Anforderungen reduziert, Bandbreite gespart und die Seitenladegeschwindigkeit erhöht werden . Der folgende Artikel wird mit Ihnen die Implementierungsmethode des verzögerten Ladens von Bildern teilen.

Definition

Verzögertes Laden von Bildern wird auch als verzögertes Laden bezeichnet. Beim verzögerten Laden von Bildern werden Bilder dann geladen, wenn Benutzer sie verwenden müssen. Dadurch können Anfragen reduziert, Bandbreite gespart, die Seitenladegeschwindigkeit erhöht und wiederum die Serverbelastung verringert werden.

Lazy Loading ist ein Ausdruck der Humanisierung des Programms. Es verbessert die Benutzererfahrung und verhindert das gleichzeitige Laden großer Datenmengen. Stattdessen werden Ressourcenanforderungen basierend auf den Benutzeranforderungen gestellt.

Die Schwierigkeit bei der Implementierung von

Lazy Loading besteht darin, festzustellen, ob ein bestimmtes Bild eine Ressource ist, die der Benutzer im Browser benötigt Der Benutzer benötigt Ressourcen im visuellen Bereich, sodass wir nur feststellen müssen, ob das Bild im visuellen Bereich angezeigt wurde. Wenn das Bild im visuellen Bereich angezeigt wird, ermitteln wir die tatsächliche Adresse des Bildes und weisen sie dem Bild zu (Die Breite und Höhe des Bildes müssen angegeben werden, kann durch Auffüllen verarbeitet werden.)

Bestimmen Sie, ob sie im sichtbaren Bereich vorhanden ist

Höhe des Browser-Ansichtsfensters

Der Abstand zwischen der zu ladenden Ressource und der Oberseite des Ansichtsfensters

Sie kann die beiden oben genannten Punkte passieren. Bestimmen Sie, ob sich das Bild im sichtbaren Bereich befindet.

var nodes = document.querySelectorAll('img[src]'),
  elem = nodes[0],
  rect = elem.getBoundingClientRect(),
  vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
 console.log(&#39;show&#39;)
}

Ermitteln Sie dann die tatsächliche Adresse des Bildes

<img src="loading.gif" alt="" src="1.gif">
...
<script data-filtered="filtered">
  var src = elem.dataset.src;
</script>

Weisen Sie die tatsächliche Adresse dem zu Bild

var img = new Image();
img.onload = function(){
 elem.src = img.src;
}
img.src = src;

Vollständiger Code

var scrollElement = document.querySelector('.page'),
  viewH = document.documentElement.clientHeight;
function lazyload(){
 var nodes = document.querySelectorAll('img[src]');
 Array.prototype.forEach.call(nodes,function(item,index){
  var rect;
  if(item.dataset.src==='') return;
  rect = item.getBoundingClientRect();
  if(rect.bottom>=0 && rect.top < viewH){
    (function(item){
     var img = new Image();
     img.onload = function(){
      item.src = img.src;
     }
     img.src = item.dataset.src
     item.dataset.src = &#39;&#39;
    })(item)
  }
 })
}
lazyload();
scrollElement.addEventListener(&#39;scroll&#39;,throttle(lazyload,500,1000));
function throttle(fun, delay, time) {
  var timeout,
    startTime = new Date();
  return function() {
    var context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    if (curTime - startTime >= time) {
      fun.apply(context, args);
      startTime = curTime;
    } else {
      timeout = setTimeout(fun, delay);
    }
  };
};

Das obige ist der detaillierte Inhalt vonEinführung in die Lazy-Loading-Methode von Bildern mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!