Das Front-End muss wissen, wie Bilder verzögert geladen werden (drei Methoden)

1. Was ist Lazy Loading?

Wenn wir eine Webseite besuchen, auf der viele Bilder angezeigt werden, ist die langsame Ladegeschwindigkeit häufig auf die große Anzahl von Bildern zurückzuführen. Eine große Anzahl von img-Bildern führt dazu, dass das Rendern der Seite blockiert wird. Bis zum Laden aller Bilder und Seiten ist viel Aufwand nötig, und der Benutzer hat die Seite bereits verlassen. Wenn der Benutzer hingegen nur den ersten Teil der Webseite anzeigt und diese dann verlässt, erhöhen viele Bilder, die zwar geladen wurden, aber nicht im Ansichtsfensterbereich angezeigt werden, weil sie sich am unteren Ende der Webseite befinden, die Belastung des Servers erheblich, aber der Benutzer wird sie nicht einmal sehen, was zu Leistungsverschwendung führt.

Um die oben genannten Probleme zu lösen, müssen wir das verzögerte Laden von Bildern einführen. Das verzögerte Laden ist eigentlich sehr einfach zu verstehen. Der entscheidende Punkt ist das Wort „verzögert“. Wenn der Benutzer den entsprechenden sichtbaren Bereich scrollt und sich Bilder im sichtbaren Bereich befinden, werden diese geladen. Bilder außerhalb des sichtbaren Bereichs, die noch nicht geladen wurden, werden nicht zuerst geladen. Wenn der Benutzer den sichtbaren Bereich bis zu ihnen scrollt, werden sie geladen. Andernfalls werden sie überhaupt nicht geladen. Dadurch wird die Leistung beim Rendern von Webseiten erheblich verbessert und unnötiger Abfall reduziert.

2. Implementieren Sie Lazy Loading🌄:

Definieren Sie zunächst eine grundlegende HTML-Seite, um einige Webseiten mit einer großen Anzahl von Bildern zu simulieren. Ich verwende beispielsweise 8 img-Tags zur Simulation und definiere einige grundlegende CSS-Stile. Der Code und die anfängliche Wirkung sind wie folgt:

html:

    <img src="img/1.jpg" alt="xxx" />
    <img src="img/2.jpg" alt="xxx" />
    <img src="img/3.jpg" alt="xxx" />
    <img src="img/4.jpg" alt="xxx" />
    <img src="img/5.jpg" alt="xxx" />
    <img src="img/6.jpg" alt="xxx" />
    <img src="img/7.jpg" alt="xxx" />
    <img src="img/8.jpg" alt="xxx" />

CSS:

 * {
        Rand: 0;
        Polsterung: 0;
        Box-Größe: Rahmenbox;
      }
      img {
        Breite: 500px;
        Höhe: 300px;
        Objekt-Passung: Abdeckung;
        Rand: 20px;
      }
      Körper {
        Anzeige: Flex;
        Flex-Wrap: Umwickeln;
        Inhalt ausrichten: gleichmäßiger Abstand;
      }

Der anfängliche Effekt ist wie folgt. Sie können in der Konsole rechts sehen, dass alle acht Bilder geladen und gerendert werden, wenn ich diese Seite ausführe:

Nachfolgend finden Sie drei Möglichkeiten, Lazy Loading mit JavaScript zu implementieren. Das Prinzip besteht darin, zu bestimmen, ob das Bild im sichtbaren Bereich angezeigt wird, und dem Bild dann das src-Attribut zuzuweisen.

2.1 Die erste Methode:

Ändern Sie zunächst jedes img-Tag und verwenden Sie das von HTML bereitgestellte Datenattribut, um benutzerdefinierte Daten einzubetten. Wir speichern die ursprüngliche Bildadresse dieses Tags in diesen benutzerdefinierten Daten. Gleichzeitig verwenden wir dasselbe Bild, um das src-Attribut aller Bilder darzustellen. Dieses Bild kann normalerweise ein Bild sein, das die Wörter „wird geladen“ anzeigt. Beachten Sie, dass wenn mehrere Bild-Tag-Quellen auf dasselbe Bild verweisen, dieses nur einmal und nicht mehrmals geladen wird. Daher definiere ich unten für jede Bild-Quelle dasselbe Bild.

    <img data-src="img/1.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/2.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/3.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/4.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/5.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/6.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/7.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/8.jpg" src="img/0.png" alt="xxx" />

Der Seiteneffekt ist wie folgt:

Als nächstes verwenden wir JavaScript, um das Bild zu laden, wenn es beim Scrollen der Bildlaufleiste im sichtbaren Bereich erscheint. Das Laden eines Bildes bedeutet eigentlich, dem src-Attribut des img-Tags die Originaladresse zuzuweisen. Anschließend wird das Laden und Rendern des Bildes angefordert.

 //Alle Bild-Tags abrufen var images = document.getElementsByTagName("img");

 window.addEventListener("scroll", (e) => {
    //Wenn ein Scroll-Ereignis auftritt, rufen Sie das ergodische Ereignis ergodic(); auf.
  });
  Funktion ergodisch() {
    // Durchlaufe jedes Bild für (lass i Bilder) {
      //Beurteilen, ob sich das aktuelle Bild im sichtbaren Bereich befindet, if (i.offsetTop <= window.innerHeight + window.scrollY) {
          //Wert des benutzerdefinierten data-src-Attributs abrufen let trueSrc = i.getAttribute("data-src");
          // Weisen Sie dem src-Attribut des Bildes den Wert zu. i.setAttribute("src", trueSrc);
      }
    }
  }
  //Auch wenn kein Scroll-Ereignis auftritt, muss ergodic() einmal ausgeführt werden;

Unter diesen ist offsetTop der Abstand von der Oberseite des Elements; window.innerHeight ist die Höhe des aktuellen Fensters; window.scrollY ist die Bildlaufdistanz; es ist nicht schwer zu erkennen, dass sich das Bild im sichtbaren Bereich des Fensters befindet, wenn i.offsetTop <= window.innerHeight + window.scrollY.

Der Effekt ist wie folgt. Betrachten Sie die Konsole rechts und stellen Sie fest, dass das Bild nur beim Scrollen geladen wird:

2.2 Die zweite Methode:

Die zweite Methode ähnelt eigentlich der ersten, außer dass die Berechnungsmethode, ob sich das Bild im sichtbaren Bereich befindet, anders ist und die wiederholten Teile wie folgt weggelassen werden:

  window.addEventListener("scroll", (e) => {
        ergodisch();
      });
      Funktion ergodisch() {
        für (sei i von Bildern) {
          //Die Berechnungsmethode unterscheidet sich von der ersten Methode if (i.getBoundingClientRect().top < window.innerHeight) {
            let trueSrc = i.getAttribute("data-src");
            i.setAttribute("src", trueSrc);
          }
        }
      }
      ergodisch();

Unter diesen ist getBoundingClientRect().top die Position des Elements relativ zum Fenster; window.innerHeight ist die Höhe des aktuellen Fensters; wenn die Position des Elements relativ zum Fenster kleiner als die Höhe des aktuellen Fensters ist, liegt es natürlich im sichtbaren Bereich des Fensters.

Der Effekt ist der gleiche:

2.3 Die dritte Methode (optimal):

Tatsächlich haben die beiden oben genannten Methoden Lazy Loading grob realisiert, aber beide haben einen Nachteil: Wenn ein Bildlaufereignis auftritt, werden eine große Anzahl von Schleifen und Beurteilungsvorgängen ausgeführt, um zu bestimmen, ob sich das Bild im sichtbaren Bereich befindet. Das ist offensichtlich keine gute Idee. Gibt es also eine Lösung? Hier stellen wir eine Beobachterschnittstelle namens Intersection Observer vor, einen Konstruktor, der nativ vom Browser bereitgestellt wird. Seine Verwendung kann viele Schleifen und Beurteilungen einsparen. Natürlich ist die Kompatibilität möglicherweise nicht sehr gut, verwenden Sie es also der Situation entsprechend.

Was ist Intersection Observer? Der Zweck dieses Konstruktors besteht darin, den Schnittbereich zwischen dem sichtbaren Fenster und dem Zielelement zu beobachten. Einfach ausgedrückt: Wenn wir es verwenden, um unsere Bilder zu beobachten, kann es erkennen, wann die Bilder im sichtbaren Fenster erscheinen oder verschwinden, und eine spezielle Rückruffunktion ausführen. Wir verwenden diese Rückruffunktion, um unsere Operationen zu implementieren. Das Konzept ist langweilig und schwer zu verstehen. Schauen Sie sich einfach das folgende Beispiel an:

1. Da IntersectionObserver ein Konstruktor ist, der nativ vom Browser bereitgestellt wird, erstellen Sie zuerst eine neue Instanz:

 const observer = neuer IntersectionObserver(Rückruf);

Es verfügt über einen Parameter „Callback“, bei dem es sich um eine Rückruffunktion handelt. Sie wird einmal ausgelöst, wenn das Zielelement sichtbar ist, und erneut, wenn das Zielelement unsichtbar ist.

2. Verwenden Sie die Beobachtereigenschaft, um an jedes Bild einen Beobachter zu binden:

für (sei i von Bildern) {
        Beobachter.beobachten(i);
      }

3. Aus dem Obigen können wir erkennen, dass jedes Bild eine Rückruffunktion auslöst, wenn es sichtbar oder unsichtbar ist. Gleichzeitig verfügt die Rückruffunktion auch über Parametereinträge. Wir können die Rückruffunktion ausführen, um zu sehen, was sie ist:

 Funktion Rückruf(Einträge) {
      console.log(Einträge)
      } 

Es ist ersichtlich, dass bei jedem Sichtbar- und Unsichtbarwerden des Bildes die Callback-Funktion ausgelöst wird und der Inhalt der Parametereinträge ausgegeben wird. Tatsächlich handelt es sich bei Einträgen um ein Array und seine Array-Elemente sind die Zielelemente, die ihren Status geändert und das Ereignis ausgelöst haben. Es gibt eine isIntersecting-Eigenschaft, die „true“ ist, wenn das Zielelement im Ansichtsfenster sichtbar ist, und „false“, wenn dies nicht der Fall ist. Wir können dieses Attribut verwenden. Wenn es wahr ist, setzen wir den src-Attributwert des Bildes, das dieses Ereignis auslöst, auf data-src und beginnen mit dem Laden.

Funktion Rückruf(Einträge) {
        für (sei i von Einträgen) {
          wenn (i.isIntersecting) {
              sei img = i.target;
              let trueSrc = img.getAttribute("data-src");
              img.setAttribute("src", trueSrc);
          }
        } 
      }

Das Zielereignisattribut gibt das Element zurück, das das Ereignis ausgelöst hat. Derzeit ist das Bild beim Zurückscrollen eine Weile sichtbar und dann eine Weile unsichtbar, wodurch die Rückruffunktion ausgelöst wird. Wenn also ein bestimmtes Bild geladen wurde, müssen wir seinen Beobachter stoppen. Es kann mit dem Attribut „unobserve“ gestoppt werden.

  Funktion Rückruf(Einträge) {
    für (sei i von Einträgen) {
      wenn (i.isIntersecting) {
          sei img = i.target;
          let trueSrc = img.getAttribute("data-src");
          img.setAttribute("src", trueSrc);
          // Beobachtung beenden observer.unobserve(img);
      }
    } 
  }

Vollständiger Code:

 var Bilder = document.getElementsByTagName("img");
   Funktion Rückruf(Einträge) {
    für (sei i von Einträgen) {
      wenn (i.isIntersecting) {
          sei img = i.target;
          let trueSrc = img.getAttribute("data-src");
          img.setAttribute("src", trueSrc);
          Beobachter.unobserve(img);
      }
    } 
  }
      const observer = neuer IntersectionObserver(Rückruf);
      für (sei i von Bildern) {
        Beobachter.beobachten(i);
      }

Der Effekt ist wie folgt, es wird Lazy Loading erreicht:

3. Zusammenfassung:

Oben geht es ausschließlich um die Implementierung des Lazy Loading von Bildern. ✨Wenn bei manchen Webseiten mit einer großen Anzahl von Bildern alle Bilder während der Seitendarstellungsphase geladen werden, führt dies im Allgemeinen dazu, dass die Seitendarstellung blockiert wird. Um das Problem des verzögerten Ladens von Bildern zu lösen, scrollt der Benutzer durch den entsprechenden sichtbaren Bereich. Wenn sich im sichtbaren Bereich ein Bild befindet, wird das Bild geladen. Der Kern dabei besteht darin, ein benutzerdefiniertes Attribut data-src für das Bild zu definieren, um die tatsächliche Zugriffsadresse des Bildes zu speichern. Wenn das Bild im sichtbaren Bereich angezeigt wird, wird der Wert von data-src dem src-Attribut zugewiesen und das Bild wird zu diesem Zeitpunkt geladen. Die Bildposition kann nicht nur durch einige allgemeine Attribute bestimmt werden, sondern es wird auch die Beobachterschnittstelle IntersectionObserver eingeführt, um ein verzögertes Laden mit geringerem Verbrauch zu erreichen.

Damit ist dieser Artikel über das Lazy Loading von Bildern (drei Methoden) abgeschlossen, das für das Frontend unerlässlich ist. Weitere verwandte Artikel zum Lazy Loading von Bildern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!