Erfahren Sie mehr über Lazy Loading in JavaScript

In diesem Artikel schauen wir uns an, wie Lazy Loading im Web funktioniert. Wir behandeln die native Lazy-Loading-API – wie Lazy-Loading implementiert wird, die Bedeutung und Vorteile von Lazy-Loading und schließlich einen einfachen Anwendungsfall für Lazy-Loading-Webinhalte.

Das Verständnis der Lazy-Loading-API und ihrer Funktionsweise hilft Entwicklern, die bereits Bibliotheken und Frameworks verwenden, die diese Techniken implementieren, zu verstehen, was unter der Haube vor sich geht. Wenn sie außerdem planen, ihre eigene Lazy-Loading-Bibliothek zu implementieren, können sie mehr geführte Recherchen durchführen und die erlernten Techniken anwenden.

Für einen realen Anwendungsfall können Marketing- und Werbeunternehmen, die Einnahmen aus Anzeigen auf ihrer Plattform erzielen, Lazy Loading einfach optimieren und anwenden, um leicht zu beurteilen, welche Anzeigen von Benutzern gesehen werden, die ihre Plattform besuchen, und so bessere Geschäftsentscheidungen zu treffen.

Empfohlenes Tutorial: „JavaScript-Video-Tutorial“

Was ist Lazy Loading?

Laut Wikipedia ist Lazy Loading ein Entwurfsmuster, das verwendet wird, um die Initialisierung eines Elements oder Objekts bei Bedarf zu verschieben. Dies bedeutet, dass nur dann, wenn der Benutzer auf der Webseite scrollt, das Ziel-DOM-Element relativ zum übergeordneten DOM-Element geladen und sichtbar ist (basierend auf einem festgelegten Schwellenwert, wenn es einen Schnittpunkt zwischen den beiden Elementen gibt).

Nachteile, wenn dieses Muster nicht übernommen wird, können Folgendes zur Folge haben:

• Erhebliche Verzögerung der Seitenleistung aufgrund mehrerer gleichzeitiger Netzwerkanforderungen oder Stapelanforderungen zum Abrufen mehrerer Bilder oder anderer Webressourcen aus einer oder mehreren Quellen.

• Erhöhte Seitenlast Zeit aufgrund der Größe des Pakets zum Herunterladen/Abrufen

• Geringe Benutzerbindung, hauptsächlich geeignet für Gebiete mit schlechter Internetverbindung. Wenn wir Entwickler den Fehler machen, Lazy Loading nicht frühzeitig zu implementieren, ist es nicht ungewöhnlich, dass Benutzer die Plattform aufgrund unsachgemäßer Handhabung von Ressourcen oder Assets wie Bildern, Iframes und Videos nicht vollständig nutzen

• , was zu nachteiligen Auswirkungen führt auf Webleistung und Zugänglichkeit. Große Auswirkungen

Derzeit unterstützen die meisten modernen und neueren Browser Lazy Loading im Web. Für Browser, die diese Unterstützung noch nicht bieten, bieten Shims oder Bibliotheken, die diese Technologie implementieren, jedoch eine einfache API-Schicht darüber.

Lazy Loading löst das Problem, die anfängliche Seitenladezeit zu verkürzen – es zeigt nur Ressourcen wie Bilder oder andere Inhalte an, die der Benutzer beim Initialisieren der Webseite und anschließend beim Scrollen der Seite sehen muss.

Wie wir alle wissen, sind Probleme mit der Webleistung und der Barrierefreiheit vielfältig; die Reduzierung der Seitengröße, des Speicherbedarfs und der allgemeinen Ladezeiten kann viel für die Webplattform bewirken. Die Vorteile des verzögerten Ladens werden deutlich, wenn wir eine Reihe von Bildern und Videos haben und diese alle auf einmal laden, wenn das Browser-DOM initialisiert wird.

Natürlich sollten Sie jetzt verstehen, wozu das führen wird, wie wir bereits besprochen haben.

Anhand der Daten sind die meisten Websites stark auf Bilder und andere Webinhalte wie Videos oder Iframes angewiesen, um Informationen an ihre Zielgruppe zu liefern. Auch wenn dies trivial und einfach erscheinen mag, bestimmt die Art und Weise, wie wir unseren Benutzern diese Inhalte anzeigen, letztendlich die Leistung unserer Plattform.

Darüber hinaus sind Aktionen, die zur Optimierung der Seitenladezeiten beitragen (z. B. Ereignisse, die davon abhängen, ob der Benutzer zu einem bestimmten Teil der Seite scrollt), einige Anwendungsfälle für verzögertes Laden. Im weiteren Verlauf dieses Artikels erfahren wir mehr über andere Anwendungsfälle in realen Umgebungen.

Native Lazy Loading API

Lazy Loading basiert auf der Intersection Observer API, einer Browser-API, die eine Möglichkeit bietet, ein Ziel namens zu erkennen oder darüber Bescheid zu wissen, wenn das Element des übergeordneten Elements im Browser-Ansichtsfenster verfügbar oder sichtbar ist (je nach Bedarf).

In diesem Fall wird die Handler-Funktion aufgerufen, um bei der Verarbeitung anderer Teile der Codelogik zu helfen, wie wir später sehen werden.

Mit dieser neuen und verbesserten Browser-API können wir auch erkennen, wann sich zwei DOM-Elemente überschneiden – hier also, wenn das Ziel-DOM-Element in das Ansichtsfenster des Browsers eintritt oder in Kontakt mit einem anderen Element (höchstwahrscheinlich seinem übergeordneten Element) steht.

Um besser zu verstehen, wie Lazy Loading funktioniert, müssen wir zunächst verstehen, wie man einen Kreuzungsbeobachter erstellt. Um einen Kreuzungsbeobachter zu erstellen, müssen wir lediglich auf das Eintreten des Kreuzungsbeobachterereignisses warten und eine Rückruffunktion oder einen Handler auslösen, der ausgeführt wird, wenn ein solches Ereignis auftritt.

Das Kreuzungsbeobachterereignis ist ein Browserereignis ähnlich der Dokumentereigniskategorie, zu der das DOMContentLoaded-Ereignis gehört.

Hinweis: Für Schnittereignisse müssen wir die Elemente angeben, auf die Schnittmenge angewendet werden soll. Dieses Element wird oft als Wurzelelement bezeichnet. Wenn jedoch kein Root-Element angegeben ist, bedeutet dies, dass wir das gesamte Browserfenster als Ziel verwenden möchten.

Zusätzlich müssen wir ein Leerzeichen für das Wurzelelement angeben (sofern vorhanden), damit dessen Form oder Größe bei Bedarf am Schnittpunkt leicht geändert werden kann. Schauen wir uns ein Beispiel an, um es besser zu verstehen:

let options = {
root: null,
rootMargin: 10px,
threshold: 1.0
}

let observer  = new IntersectionObserver (options, callback);

Im obigen Codeausschnitt sehen wir einen einfachen Anwendungsfall zum Erstellen eines Beobachters. Das Objekt options hilft uns, benutzerdefinierte Eigenschaften für das Ziel zu definieren. options对象帮助我们定义目标的自定义属性。

这里，options对象中的threshold属性表示何时触发回调。它的默认值为0，这意味着一旦用户接近目标元素并且它变得可见，就会触发回调。

另一方面，根元素是父元素，当目标元素在用户滚动网页时对用户可见时，根元素充当目标元素的视区。注意，如果根设置为空，父元素将自动成为视区。

最后，rootMargin帮助设置根元素周围的空白。例如，在计算目标元素和父元素/viewport之间的交集之前，可能需要调整它的大小、边距或维数。

而且，接受两个输入参数的回调包括一个我们打算应用于目标元素和调用回调的观察者的intersectionObserverEntry对象列表。

回调的签名如下:

let callback = (entries, observer) => {
entries.forEach(entry => {
If (entry.isIntersection) {
// do some magic here
}
// and some other methods
})
}

该intersectionObserverEntry对象表示父元素和目标元素之间存在交集。它有一堆的API中的属性，其中包括isIntersection，intersectionRatio，intersectionRect，target，time，等。

我们需要针对特定的DOM元素，并在它与父元素相交时触发回调函数。目标DOM元素的一个例子如下面的代码片段所示:

let target = document.querySelector("#targetElement");

在上面的代码片段中，我们创建了一个目标元素并为它分配了一个变量。之后，我们使用intersectionObserver构造函数/函数签名上的observe方法观察目标元素，如下所示:

// start observing for changes on the target element
observer.observe(target);

当观察者为目标设置的阈值达到时，将触发回调。

最后，observe()方法告诉观察者要观察什么目标元素。请注意，交集观察者在它的API中同样有一堆方法:unObserve()、takeRecords()、observe()

Hier gibt das Attribut threshold im Objekt options an, wann der Rückruf ausgelöst wird. Sein Standardwert ist 0, was bedeutet, dass der Rückruf ausgelöst wird, sobald sich der Benutzer dem Zielelement nähert und es sichtbar wird.

Andererseits ist das Stammelement das übergeordnete Element, das als Ansichtsfenster des Zielelements fungiert, wenn das Zielelement für den Benutzer sichtbar ist, während er auf der Webseite scrollt. Beachten Sie, dass, wenn root auf leer gesetzt ist, das übergeordnete Element automatisch zum Ansichtsfenster wird. Schließlich hilft rootMargin dabei, den Rand um das Stammelement festzulegen. Beispielsweise müssen Sie möglicherweise die Größe, Ränder oder Abmessungen des Zielelements anpassen, bevor Sie den Schnittpunkt zwischen ihm und dem übergeordneten Element/Ansichtsfenster berechnen.

Außerdem enthält der Rückruf, der zwei Eingabeparameter akzeptiert, eine Liste von intersectionObserverEntry-Objekten, die wir auf das Zielelement anwenden möchten, und den Beobachter, der den Rückruf aufruft.

Die Signatur des Rückrufs lautet wie folgt:

let  options = {
root: document.querySelector('.root'),
rootMargin: '0px, 0px, 100px, 0px'
};

• DasIntersectionObserverEntry-Objekt zeigt an, dass es einen Schnittpunkt zwischen dem übergeordneten Element und dem Zielelement gibt. Es verfügt über eine Reihe von Eigenschaften in der API, darunter isIntersection, intersectionRatio, intersectionRect, target, Zeit usw.
  Wir müssen auf ein bestimmtes DOM-Element abzielen und die Rückruffunktion auslösen, wenn es das übergeordnete Element schneidet. Ein Beispiel für ein Ziel-DOM-Element ist im folgenden Codeausschnitt dargestellt:

let  images = [...document.querySelectorAll('.targetImages')];

• Im obigen Codeausschnitt haben wir ein Zielelement erstellt und ihm eine Variable zugewiesen. Danach beobachten wir das Zielelement mithilfe der Beobachtungsmethode auf der Konstruktor-/Funktionssignatur „IntersectionObserver“ wie folgt:

  const callback = (entries) => {
  
  entries.forEach(entry => {
   If (entry.isIntersecting) {
      observer.unObserve('entry.target');
  }
  // handle other code logic here 
  })
  }

  Wenn der vom Beobachter für das Ziel festgelegte Schwellenwert erreicht ist, wird der Rückruf ausgelöst.
• Schließlich teilt die Methode observe() dem Beobachter mit, welches Zielelement beobachtet werden soll. Bitte beachten Sie, dass der Kreuzungsbeobachter auch eine Reihe von Methoden in seiner API hat: unObserve(), takeRecords(), observe() usw . Einige Beispiele.

Vorteile der Lazy Loading-Technik

Jetzt müssen wir besser verstehen, warum Lazy Loading von Webinhalten und Assets notwendig ist. Werfen wir einen Blick auf einige weitere Vorteile der Verwendung dieser Technologie:

Erstellen Sie leicht zugängliche Webanwendungen. Diskussionen über Barrierefreiheit im Internet stehen heute im Vordergrund. Der Einsatz dieser Technologie wird definitiv zum Aufbau einer breiteren Plattform mit hoher Benutzerbindung beitragen. Wenn die Webplattform für die Förderung von Geschäftszielen und die Schaffung von Mehrwert relevant ist, wird die Implementierung dieser Technologie dazu beitragen, die Plattform benutzerfreundlicher zu machen. Webstandards werden es Ihnen später danken!

Als Entwickler müssen Sie möglicherweise unendliches Scrollen auf der Webplattform implementieren. Das Verständnis dieses Konzepts wird einen großen Beitrag zur Schaffung eines unmittelbaren Geschäftswerts leisten

Lazy Loading implementieren

Schauen wir uns ein einfaches Beispiel für das Lazy Loading von Bildern auf einer Webseite an. Wir fangen damit an, den Schnittpunkt des benutzerdefinierten Optionsobjekts anzuvisieren, den wir beobachten wollen:

let observer = new intersectionObserver(options, callback);

Nun zielen wir für das Zielelement auf ein paar Bilder ab:

images.forEach(image => {
observer.observe(image);
})

Jetzt schauen wir uns die Implementierung des Rückrufs an:

rrreee

us Der Schnittmengenbeobachter-Konstruktor kann weiterhin aufgerufen werden, um das Zielelement zu beobachten, basierend auf der in seinem Optionsobjekt angegebenen Anpassung:

rrreee Schließlich können wir das zu beobachtende Zielelement beobachten: rrreee

Hinweis: Der Einfachheit halber, Dies ist hier kein HTML- und CSS-Code. Weitere Informationen zur Implementierung dieser Technik finden Sie in diesem Beispiel in der MDN-Dokumentation. 🎜🎜🎜🎜Zusammenfassung🎜🎜🎜🎜Wenn wir nun eine Reihe von Bildern oder Videos auf einer Webseite haben und diese laden, wenn das Browser-DOM initialisiert wird, werden die Vorteile dieser Technik sehr offensichtlich sein. Als Entwickler haben wir die Verantwortung, eine optimale Leistung der von uns verwalteten oder gewarteten Plattformen sicherzustellen, insbesondere wenn diese mit Geschäftszielen verknüpft sind. 🎜🎜Als Web-Performance-Technologie hilft Lazy Loading, solche Probleme zu lösen. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Lazy Loading in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!