Beispiel-Tutorial zur Implementierung des verzögerten Ladens von Bildern basierend auf JS

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. Der detaillierte Code wird hier zusammengestellt

Vorwort

Das verzögerte Laden von Bildern ist auch eine gängige Methode zur Leistungsoptimierung. Kürzlich habe ich auch einen Nachrichtenlisten-Client 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 referenziert das Bild beim Rendern das Standardbild. und dann wird die tatsächliche Adresse über den data-*-Attributen platziert.

<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 es dem Scrollen und Ändern der Fenstergröße für Ereignisse ähnelt B. Mausbewegungen, die häufig ausgelöst werden, ist es am besten, die Auslösefrequenz mithilfe von Drosselung oder Entprellung zu steuern. 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;)
  }
  }
 }

Fazit

Das war's auch schon . Beim nächsten Mal füge ich möglicherweise die Implementierung des Anti-Shake-Drosselungs-Quellcodes hinzu. Abschließend werden zwei gängige Scroll-Urteile hinzugefügt:

1 Die Seite scrollt vom Startbildschirm weg (zu diesem Zeitpunkt kann die Schaltfläche zum Zurückkehren nach oben angezeigt werden): document.body.scrollTop > window.innerHeight

2. Seite Scrollen Sie nach unten (Sie können die Benutzeroberfläche anpassen, um zu diesem Zeitpunkt mehr Inhalt zu erhalten): window.scrollY + window.innerHeight > document.body.offsetHeight

Das Obige ist der gesamte Inhalt dieses Artikels Hilfreich für das Lernen aller. Ich hoffe auch, dass jeder Script Home unterstützt.

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Implementierung des verzögerten Ladens von Bildern basierend auf JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!