Lozad.js: Performantes Lazy Loading von Bildern

Es gibt einige verschiedene „traditionelle“ Wege, um Bilder per Lazy Loading zu laden. Sie alle erfordern, dass JavaScript ermittelt, ob ein Bild gerade im sichtbaren Bereich des Browsers oder nicht. Traditionelle Ansätze könnten sein:

• Abhören von scroll- und resize-Ereignissen auf dem window
• Verwendung eines Timers wie setInterval

Beides hat Leistungsprobleme.

Warum traditionelle Ansätze nicht performant sind?

Beide oben genannten Ansätze sind problematisch, da sie *wiederholt* *arbeiten* und ihre Funktion **erzwungene Layouts auslöst, während die Position des Elements in Bezug auf den Viewport berechnet wird, um zu prüfen, ob sich das Element innerhalb des Viewports befindet oder nicht.

Um diese Leistungsprobleme zu bekämpfen, *drosseln* einige Bibliotheken die Funktionsaufrufe, die diese Dinge tun, und begrenzen die Anzahl der Ausführungen.

Selbst dann verbrauchen wiederholte Layout-/Reflow-auslösende Operationen wertvolle Zeit, während ein Benutzer mit der Website interagiert, und verursachen "Junk" (dieses träge Gefühl bei der Interaktion mit einer Website, das niemand mag).

Es gibt einen anderen Ansatz, den wir verwenden könnten, der eine neue Browser-API nutzt, die speziell dafür entwickelt wurde, uns bei Dingen wie Lazy Loading zu helfen: die Intersection Observer API.

Genau das nutzt meine eigene Bibliothek, Lozad.js.

Was macht Lozad.js performant?

Intersection Observers sind die Hauptzutat. Sie ermöglichen die Registrierung von Callback-Funktionen, die aufgerufen werden, wenn ein überwachtes Element ein anderes Element (oder den Viewport selbst) betritt oder verlässt.

Während Intersection Observers nicht die genauen Pixel liefern, die sich überlappen, ermöglichen sie das Lauschen auf Ereignisse, die uns erlauben zu beobachten, ob Elemente Elemente um X% (konfigurierbar) betreten, *dann* wird der Callback ausgelöst. Das ist genau unser Anwendungsfall bei der Verwendung von Intersection Observers für Lazy Loading.

Schnelle Fakten zu Lozad.js

• Leichtgewichtig: nur 535 Bytes minifiziert & gzipped
• Keine Abhängigkeiten
• Verwendet die IntersectionObserver API
• Ermöglicht Lazy Loading von dynamisch hinzugefügten Elementen (nicht nur Bildern), allerdings mit einer benutzerdefinierten Ladefunktion

Verwendung

Installieren von npm

yarn add lozad

oder über CDN

<script src="https://cdn.jsdelivr.net/npm/lozad"></script>

Fügen Sie in Ihrem HTML einer beliebigen Bildklasse, die Sie per Lazy Loading laden möchten, eine Klasse hinzu. Die Klasse kann über die Konfiguration geändert werden, aber „lozad“ ist der Standard.

<img class="lozad" data-src="image.png">

Beachten Sie auch, dass wir das src-Attribut des Bildes entfernt und durch data-src ersetzt haben. Dies verhindert, dass das Bild geladen wird, bevor das JavaScript ausgeführt wird und feststellt, dass es geladen werden sollte. Es liegt an Ihnen, die Auswirkungen zu berücksichtigen. Mit diesem HTML werden Bilder erst angezeigt, wenn das JavaScript ausgeführt wird. Sie werden auch nicht in Kontexten wie RSS oder anderer Syndizierung angezeigt. Möglicherweise möchten Sie Ihr HTML filtern, um dieses Markup-Muster nur auf Ihrer eigenen Website zu verwenden und nicht anderswo.

Initialisieren Sie Lozad in JavaScript mit den Optionen

const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();

Lesen Sie hier über die vollständige Liste der verfügbaren Optionen in der Lozad.js API.

Demo

Sehen Sie den Pen oGgxJr von Apoorv Saxena (@ApoorvSaxena) auf CodePen.

Browser-Unterstützung

Die Browserunterstützung ist begrenzt, da die Funktion relativ neu ist. Verwenden Sie den offiziellen IntersectionObserver Polyfill, um die eingeschränkte Unterstützung dieser API zu überwinden.