Detaillierte Erläuterung des Implementierungsprinzips des verzögerten Ladens von Bildern in js

Vorteile des verzögerten Ladens von Bildern:

Verbesserung des Benutzererlebnisses

Optimierung des Codes;

HTTP-Anfragen reduzieren;

Serverseitiges Laden

Prinzip des verzögerten Ladens von Bildern:

Stellen Sie zunächst die Quelle des Bildes auf dasselbe Bild ein oder legen Sie es nicht fest, und legen Sie ein spezielles Attribut für das IMG-Tag fest, zum Beispiel: data-src wird zum Speichern der tatsächlichen Vorschau verwendet Adresse des Bildes; wenn das Bild nicht in den sichtbaren Bereich gelangt, wird das gleiche Bild angezeigt oder das Bild wird zu diesem Zeitpunkt nicht angezeigt. Wenn das Bild in den sichtbaren Bereich gelangt, lautet der Wert auf data-src src zugewiesen und dann die http-Anfrage gesendet.

Taste: Bestimmen Sie, ob das Bild in den sichtbaren Bereich gelangt (Tastenfunktion)

Breite des sichtbaren Seitenbereichs: document.body.clientWidth;

Web Höhe des sichtbaren Bereichs der Seite: document.body.clientHeight;

Breite des sichtbaren Bereichs der Webseite: document.body.offsetWidth (einschließlich der Breite des Randes); .body.offsetHeight (Einschließlich der Breite der Kante);

Vollständige Textbreite des Webseitenkörpers: document.body.scrollWidth;

Vollständige Texthöhe des Webseitenkörpers: document .body.scrollHeight;

Die Höhe der Seite: document.body.scrollTop;

Die linke Seite der Seite, die gescrollt wird: document.body.scrollLeft; Teil links: window.screenLeft;

Höhe der Bildschirmauflösung: window.screen.height;

Breite der Bildschirmauflösung: window.screen.width; height: window.screen.availHeight;

Der Abstand des aktuellen Elements relativ zum oberen Rand seines Offsets.Parent Element: HTMLElement.offsetTop;Viewport-Höhe des Browserfensters (in Pixel): window.innerHeight; (beinhaltet auch die Höhe der Bildlaufleiste, wenn eine horizontale Bildlaufleiste vorhanden ist)

(empfohlenes Tutorial:

js-Tutorial

)

Code-Implementierung:

HTML-Teil

<div>
  <img src="./img/1.jpg" data-src="./img/1.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/2.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/3.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/4.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/5.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/6.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/7.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/8.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/9.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/10.jpg" alt="">
 </div>

js-Teil

window.onload = () => {
   // 获取某节点与浏览器顶部的距离
   function getTop(e) {
    if (!e) return
    return e.offsetTop
   }
   let imgs = document.getElementsByTagName('img')
   function lazyLoading(imgs) {
    // 可是区域高度
    let innerHeight = window.innerHeight;
    // 滚动区域高度
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    for (let i = 0; i < imgs.length; i++) {
     // 图片距离顶部的距离大于可视区域和滚动区域之和时加载
     if (scrollTop + innerHeight > getTop(imgs[i])) {
      imgs[i].src = imgs[i].getAttribute(&#39;data-src&#39;)
     }
    }
   }
   lazyLoading(imgs)
   window.onscroll = () => {
    lazyLoading(imgs)
   }
  }

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Implementierungsprinzips des verzögerten Ladens von Bildern in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!