Die besten Möglichkeiten, Ihr eigenes Lazy Loading für Websites anzupassen
Veröffentlicht: 2019-07-29Lazy Loading wird verwendet, um das Laden einiger Bilder oder Webseitenelemente auf später zu verschieben, wenn ein Benutzer eine Webseite besucht. Dies geschieht normalerweise für Bilder und Website-Elemente unterhalb des Falzes. Die Idee ist, dass Sie, anstatt die gesamte Webseite auf einmal zu laden, einige Teile der Webseite laden, während der Benutzer weiter nach unten scrollt.
Der Hauptvorteil der Verwendung von Lazy Loading besteht darin, dass die Ladezeit der gesamten Website verkürzt wird. Lazy Loading verbessert die Leistung der Website und bietet eine bessere Benutzererfahrung, indem zuerst der obere Teil geladen wird, den Besucher sofort ansehen oder lesen können. Wenn Besucher auf Ihre Webseite kommen und lange warten müssen, verlieren sie ihr Interesse und gehen möglicherweise weg. Wenn Sie ihnen jedoch etwas zum Ansehen oder Lesen geben, während Sie den Rest der Webseite laden, können Sie sie an Ihre Website binden. Der zweite Vorteil von Lazy Loading ist die Kostenreduzierung. Bilder werden nur heruntergeladen, wenn der Website-Besucher diesen bestimmten Abschnitt der Website besucht. Wenn der Besucher also nicht nach unten scrollt, werden weniger Daten auf sein Gerät heruntergeladen, was ihm Geld spart.
Aufgrund dieser Vorteile ist Lazy Loading eine hervorragende Möglichkeit, die Benutzerfreundlichkeit und Effizienz Ihrer Website zu verbessern.
Sie können Lazy Loading für Ihre Website auf zwei Arten anpassen – mit der CSS-Hintergrundeigenschaft oder mit dem <img>-Tag. Die <img>-Tag-Methode ist jedoch häufiger von den beiden, da diese Technik einfach zu verwenden ist.
<img>-Tag-Eigenschaft:
Wenn das <img>-Tag verwendet wird, verwendet der Browser das src-Attribut, um das Laden des Bildes auszulösen. Es spielt keine Rolle, ob es sich um das 1. Bild oder das 100. Bild in Ihrem Code handelt. Wenn der Browser das src-Attribut empfängt, löst er das Laden des Bildes aus. Um diese Bilder also per Lazyload zu laden, fügen Sie die Bild-URL einem anderen Attribut als src hinzu. Wenn Sie beispielsweise die Bild-URL in das data-src-Attribut einfügen, löst der Browser das Laden des Bilds nicht aus, da das src-Attribut leer ist.
Nachdem der Upfront-Load beendet ist, müssen wir dem Browser mitteilen, wann das Bild geladen werden soll. Wir wollen das Laden des Bildes auslösen, sobald es in den Viewport eintritt. Es gibt zwei Möglichkeiten, das Timing eines Bildes zu überprüfen, das in das Ansichtsfenster eintritt:
1. Verwenden von JavaScript-Ereignissen:
Bei dieser Technik werden Ereignis-Listener für Größenänderungen, Ausrichtungsänderungen und Scroll-Ereignisse im Browser verwendet. Das Scroll-Ereignis ist das offensichtlichste. Es wird verwendet, um zu überprüfen, wann der Benutzer die Webseite scrollt. Die Ereignisse „orientationChange“ und „resize“ sind gleichermaßen wichtig für Lazy Loading. Das Resize-Ereignis wird ausgelöst, wenn sich die Größe des Browserfensters ändert. Das Ereignis „orientationChange“ tritt auf, wenn das Gerät vom Hochformat ins Querformat oder umgekehrt gedreht wird. In diesen Fällen ändert sich die Anzahl der auf dem Bildschirm sichtbaren Bilder, und daher müssen wir das Laden der Bilder auslösen.
Wenn eines dieser Ereignisse eintritt, suchen wir nach allen Bildern auf der Seite, die noch nicht geladen wurden. Indem wir alle entladenen Bilder auf der Webseite überprüfen, die sich jetzt im Ansichtsfenster befinden, finden wir diejenigen heraus, die sofort geladen werden müssen. Dies erfolgt unter Verwendung der aktuellen Scrolloberseite des aktuellen Dokuments, der Fensterhöhe und des oberen Versatzes des Bildes.
Wenn ein Bild in den Viewport gelangt ist, nehmen wir die Bild-URL aus dem data-src-Attribut und platzieren sie im src-Attribut, das das Laden des Bilds auslöst. Dann müssen wir die Klasse Lazy aus dem Bild entfernen, da diese Klasse dafür sorgt, dass Bilder träge geladen werden. Wenn alle Bilder geladen sind, werden die Ereignis-Listener entfernt.
Beim Scrollen wird das Scroll-Ereignis kontinuierlich ausgelöst. Um die Leistung zu steigern, können wir also ein kleines Timeout hinzufügen, das die Lazy Loading-Ausführung drosselt.
2. Verwendung der Schnittstellenbeobachter-API:
Intersection Observer API ist eine vergleichsweise neue API in Browsern. Diese Technik macht es sehr einfach, den Zeitpunkt eines Elements zu erkennen, das in das Ansichtsfenster eintritt. Diese Technik liefert im Vergleich zur vorherigen Methode eine hervorragende Leistung, ohne komplexe Mathematik zu verwenden.
Zuerst müssen wir den Beobachter an alle Bilder anhängen, die Lazy Loading erfordern. Wenn die API erkennt, dass ein Bild in den Darstellungsbereich gelangt ist, wählt sie die URL aus der Datenquelle aus und fügt sie mithilfe der Methode „isIntersecting“ in das src-Attribut ein, um das Laden des Bilds auszulösen. Danach wird die Lazy-Klasse zusammen mit dem Beobachter entfernt.
Die Intersection Observer API arbeitet schnell, ohne dass die Website beim Scrollen träge erscheint, verglichen mit der Verwendung von JavaScript-Ereignissen. Bei der Event-Listener-Technik mussten wir ein Timeout hinzufügen, das eine leichte Verzögerung hinzufügt. Die Intersection Observer API wird jedoch nicht von allen Browsern unterstützt. Daher ist der Ereignis-Listener zu einer beliebten Wahl für die Benutzer geworden.
CSS-Hintergrundeigenschaft:
Zum Laden von CSS-Hintergrundbildern muss der Browser das CSS-Objektmodell (CSSOM) zusammen mit dem Dokumentobjektmodell (DOM) erstellen, um zu entscheiden, ob der CSS-Stil auf ein im vorhandenen Dokument vorhandenes DOM angewendet wird. Wenn die CSS-Regel nicht auf das Element zutrifft, lädt der Browser das Hintergrundbild nicht.
Bei dieser Technik wenden wir die CSS-Eigenschaft des Hintergrundbilds an, wenn ein Element in den Darstellungsbereich kommt. In CSS gibt es ein Element mit der ID bg-image (Hintergrundbild). Sobald die Klasse lazy zum Bild hinzugefügt wurde, überschreiben wir in der CSS-Technik die Eigenschaft bg-image und machen sie zu none.
Das Hinzufügen der .lazy-Klasse zum #bg-Bild wird in CSS bevorzugt, anstatt nur #bg-Bild zu verwenden. Zunächst wendet der Browser background-image: none auf das Element an. Sobald wir durch die Webseite scrollen, erkennen die Ereignis-Listener oder der Intersection Observer das im Ansichtsfenster vorhandene Bild und löscht die .lazy-Klasse. Dies ist in der CSS-Technik nicht anwendbar, da die Eigenschaft bg-image auf das Element angewendet wird, das das Laden des Hintergrundbilds auslöst.
Hier sind die zwei Möglichkeiten, wie Sie Ihre eigene Lazy-Loading-Website anpassen können. Beide Techniken liefern außergewöhnliche Ergebnisse. Wenn Sie jedoch eine unkomplizierte Technik wünschen, sollten Sie sich für das <img>-Tag entscheiden. Es gibt viele Plugins für WordPress-Benutzer, um Lazy-Loading-Bilder auch auf ihren WordPress-Websites anzupassen. Das Optimieren von Bildern für Ihre WordPress-Website mit diesen Plugins verbessert zusammen mit Lazy Loading die Leistung Ihrer Website, bietet ein großartiges, besseres Erlebnis und hilft auch bei der Suchmaschinenoptimierung.