Js-Promotion: So realisieren Sie das verzögerte Laden von Bildern

Um zu wissen, was es ist, aber auch um zu wissen, was es ist, welche Methode man in verschiedenen Szenarien verwenden sollte und wie man das Beste erreicht.

Warum kommt es zum verzögerten Laden von Bildern und welche Probleme wurden gelöst? Was ist neben Lazy Loading auch mit Preloading? Was ist Preloading, wie erreicht man es und wie ist es im Vergleich zum Lazy Loading?

Warum Lazy Loading von Bildern und welche Probleme durch Lazy Loading gelöst werden

Beispiel: Beim Laden bei Bedarf kann der Benutzer nur einen Teil der Bilddaten im sichtbaren Fenster sehen. Wenn das Bild auf einmal geladen wird, nimmt es viel Ladezeit in Anspruch und kann leicht zu Einfrierungen und anderen Phänomenen führen Verschwenden Sie die Leistung zu diesem Zeitpunkt. Daher ist ein verzögertes Laden erforderlich (es versteht sich, dass der Benutzer das sichtbare Fenster verschiebt, um die Daten des sichtbaren Fensters zu laden).

Lazy Loading: Wenn das Bild im sichtbaren Bereich des Browsers erscheint, legen Sie den tatsächlichen Pfad des Bildes fest und zeigen Sie das Bild an. Vorladen: Laden Sie Bilder im Voraus und rendern Sie sie direkt aus dem lokalen Cache, wenn der Benutzer sie anzeigen muss. Eines ist frühes Laden und das andere ist verzögertes Laden oder gar kein Laden. Durch verzögertes Laden kann der Druck auf das Front-End des Servers bis zu einem gewissen Grad verringert werden, während das Vorladen den Druck auf das Front-End des Servers erhöht. Natürlich kann das Vorladen dazu beitragen, dass Benutzer beim Durchsuchen von Website-Inhalten die schnellste Reaktion erhalten und die Benutzerfreundlichkeit verbessern Erfahrung

Das Konzept des Lazy Loading

Lazy Loading wird auch als verzögertes Laden und On-Demand-Laden bezeichnet. Es bezieht sich auf das verzögerte Laden von Bilddaten auf langen Webseiten, was eine bessere Möglichkeit zur Optimierung der Webseitenleistung darstellt. Wenn auf einer relativ langen Webseite oder Anwendung viele Bilder vorhanden sind, werden alle Bilder geladen, und der Benutzer kann nur den Teil der Bilddaten im sichtbaren Fenster sehen, was zu Leistungseinbußen führt. Die Verwendung von Lazy Loading kann die Ladeleistung effektiv verbessern.

Realisierungsprinzip

Wir wissen, dass das Laden von Bildern durch src verursacht wird. Wenn src einen Wert zugewiesen wird, fordert der Browser Bildressourcen an. Nach diesem Prinzip verwenden wir das Attribut data-xxx von HTML5, um den Pfad des Bildes zu speichern. Wenn das Bild geladen werden muss, weisen Sie src den Pfad des Bildes in data-xxx zu, damit das Bild geladen werden kann Wird bei Bedarf geladen, d. h. Lazy Loading.

Bevor wir die Code-Implementierung analysieren, müssen wir auch die folgenden Wissenspunkte verstehen:

window.innerHeight ist die Höhe des sichtbaren Bereichs des Browsers.
document.body.scrollTop || document.documentElement.scrollTop ist die Distanz, die der Browser gescrollt hat.
imgs.offsetTop ist die Höhe des oberen Rands des Elements vom oberen Rand des Dokuments (einschließlich des Abstands der Bildlaufleiste).
Bildladebedingung: img.offsetTop < window.innerHeight + document.body.scrollTop.

Code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>图片懒加载</h1>
    <div class="container">
      <p>Lorem</p>
      <p>Lorem</p>
      <img class="scroll-con-img" src="" data-src="./images/曾小龙.jpg" />
      <img class="scroll-con-img" src="" data-src="./images/meet.jpg" />
      <img class="scroll-con-img" src="" data-src="./images/meet.jpg" />
    </div>
  </body>
</html>
<script>
  //第一种方法
  var imgs = document.querySelectorAll('img')
  function lozyLoad() {
    var scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop
    var winHeight = window.innerHeight
    for (var i = 0; i < imgs.length; i++) {
      if (imgs[i].offsetTop < scrollTop + winHeight) {
        imgs[i].src = imgs[i].getAttribute('data-src')
      }
    }
    console.log("我想你了");
  }
  window.onscroll = lozyLoad();
</script>

Js-Promotion: So realisieren Sie das verzögerte Laden von Bildern

Warum Lazy Loading von Bildern und welche Probleme durch Lazy Loading gelöst werden

Das Konzept des Lazy Loading

Realisierungsprinzip

Code

Ich denke du magst