Beispiel für verzögertes Laden von Bildern mit Javascript

Das verzögerte Laden von Bildern ist auch eine relativ häufige Methode zur Leistungsoptimierung. In diesem Artikel werden hauptsächlich Beispiele für das verzögerte Laden von Bildern mit nativem JS vorgestellt. Bei Bedarf können Sie den detaillierten Code kompilieren siehe

Vorwort

Das verzögerte Laden von Bildern ist ebenfalls eine relativ häufige Methode zur Leistungsoptimierung. Ich habe kürzlich Vue verwendet, um eines zu erstellen Es wird auch im Client der Nachrichtenliste verwendet. Hier finden Sie eine kurze Einführung in das Implementierungsprinzip und einen Teil des Codes.

Implementierungsprinzip

Beim Laden der Seite waren Bilder schon immer die Hauptverkehrsquelle, und es gibt viele Leistungsmethoden für Bilder. B. Base64, Sprite-Bilder usw.; Lazy Loading ist auch eines davon. Das Hauptprinzip besteht darin, den src von Nicht-Erstbildschirm-Bildern auf einen Standardwert zu setzen, dann das Scrollen des Fensters zu überwachen und ihn dann anzugeben eine echte Bildadresse, wenn das Bild im Fenster erscheint. Dies kann die Ladegeschwindigkeit des ersten Bildschirms sicherstellen und dann Bilder bei Bedarf laden.

Spezifischer Code

Zuerst beim Rendern das Bild wird in Anführungszeichen gesetzt Standardbild, und fügen Sie dann die tatsächliche Adresse in das data-*-Attribut ein.

<image src=&#39;./../assets/default.png&#39; :src=&#39;item.allPics&#39; class=&#39;lazyloadimg&#39;>

Um das Scrollen zu überwachen, verwenden Sie einfach window.onscroll. Beachten Sie jedoch, dass das Scrollen und die Größenänderung ähnlich wie bei Fenstern sind, und Ereignisse wie Mausbewegungen, die häufig ausgelöst werden . Zur Steuerung der Triggerfrequenz verwenden Sie am besten die Drosselung oder die Anti-Shake--Funktion (Debounce). Es gibt zwei Kapselungsmethoden in Underscore und Lodash, daher werde ich sie hier nicht im Detail vorstellen.

Der nächste Schritt besteht darin, zu bestimmen, ob das Bild im Fenster angezeigt wird, hauptsächlich basierend auf drei Höhen: 1. Wie weit der aktuelle Körper von oben gescrollt wurde. 2. Die Höhe des Fensters. 3. Der Abstand zwischen dem aktuellen Bild und der Oberseite. Der spezifische Code lautet wie folgt:

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
  var bodyScrollHeight = document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
  var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度
  if (imgHeight < windowHeight + bodyScrollHeight) {
   imgs[i].src = imgs[i].getAttribute(&#39;src&#39;);
   img[i].className = img[i].className.replace(&#39;lazyloadimg&#39;,&#39;&#39;)
  }
  }
 }

Das obige ist der detaillierte Inhalt vonBeispiel für verzögertes Laden von Bildern mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!