Die Lazy Load oder auch (Lazyload) Technik bietet sich vor allem für Webseiten mit vielen oder großen Bildern an. Mittels jQuery Lazy Load werden die Bilder einer Webseite nicht beim ersten Aufruf mitgeladen sondern dann nachgeladen, wenn sie in den sichtbaren Bereich (viewport) des Browser-Fensters gelangen. Bilder die sich der Besucher nicht ansieht, müssen und werden auch nicht geladen.
Dadurch spart ihr euch bzw. euren Besuchern beim Aufruf der Webseite nicht nur einige KB, die sonst an Bildern geladen werden müssten, sondern auch die damit einhergehenden HTTP-Requests.
In diesem Artikel möchte ich euch erklären, wie ihr den jQuery Lazy Load in eure Webseite bzw. euer WordPress-System einbinden könnt.
Technik: Wie funktioniert der Lazy Load
Die Lazy Load Technik funktioniert relativ einfach und ist schnell erklärt. Das src=““ Attribut eines Bildes wird auf einen globalen Platzhalter gesetzt oder, wenn man noch mehr HTTP-Requests und Dateigröße sparen möchte, kann das src=““ Attribut auch einen Base64 String für ein transparentes GIF oder ähnliches beinhalten.
So entfällt beim Aufrufen der Webseite jeder HTTP-Request für die Bilder und natürlich auch das Bild selbst, welches geladen werden müsste.
Die echte Bildquelle (src) wird in einem HTML5 data Attribut im Image-Tag eingetragen.
Kommt das Bild in den sichtbaren Bereich des Browser-Fensters (viewport), wird es erst dann über ein entsprechendes JavaScript nachgeladen.
Dabei ist es auch möglich einen Offset zu definieren, um Bilder z.B. kurz vor Erreichen des Viewports nachzuladen. Auf diese Art und Weise würde der Besucher kaum bis gar nicht merken, dass hier ein Lazy Load im Hintergrund läuft.
Eine andere Variante wäre das Einblenden der Bilder mit einem leichten Fade-Effekt. So kann das Nachladen der Bilder sogar optisch noch schön in Szene gesetzt werden. Es kann also nicht nur die Ladezeit verkürzen sondern auch bewusst als Stilmittel verwendet werden.
Lazy Load mit Unveil.js
Unveil.js ist mit gerade einmal 1KB an Dateigröße das wohl kleinste Lazy Load Plugin, um Bilder nachzuladen. Aufgrund der Größe und zuverlässigen Funktion gehört Unveil zu den beliebtesten Lazy Load Scripten.
Der HTML-Code der Bilder würde wie folgt angepasst:
<img class="lazy" src="placeholder.png" data-src="img1.jpg" /> <img class="lazy" src="placeholder.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />
- placeholder.png ist dabei ein einfacher Platzhalter für alle Bilder
- data-src gibt den Pfad zum richtigen Bild an
- data-src-retina kann den Pfad zu einer Retina-Version des Bildes beinhalten (falls verfügbar)
Der JavaScript Code um Unveil auszuführen, sieht dabei wie folgt aus:
$(document).ready(function() {
// ohne Offset
$('.lazy').unveil();
// Mit Offset, Bild wird 200 Pixel vor erreichen des Viewports geladen
$('.lazy').unveil(200);
});
Lazy Load Plugin für jQuery
Da dieses Plugin keinen Eigennamen hat, außer „Lazy Load Plugin for jQuery„, bleibe ich hier bei derselben Benennung. Es bedeutet jedoch nicht, dass es sich dabei um das einzig wahre oder beste Lazy Load Plugin für jQuery handelt.
Die Integration ist der von Unveil sehr ähnlich, als erstes werden die Scripte eingebunden:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
Danach muss der Code für die Bilder angepasst werden:
<img class="lazy" src="placeholder.png" data-original="img1.jpg" />
- placeholder.png ist dabei ein einfacher Platzhalter für die Bilder
- data-original gibt den Pfad zum richtigen Bild an
Um das jQuery Plugin dann auszuführen, wird folgender Code verwendet:
$(function() {
// Ohne Optionen
$("img.lazy").lazyload();
// Mit Offset, Bild wird 200 Pixel vor erreichen des Viewports geladen
$("img.lazy").lazyload({threshold : 200});
// Mit Offset und Fade Effekt
$("img.lazy").lazyload({threshold : 200, effect : "fadeIn"});
});
Lazy Load für WordPress
Für WordPress gibt es diverse Lazy Load Plugins. Mein persönlicher Favorit unter den möglichen Plugins ist Crazy Lazy von Sergej Müller.
Das Plugin basiert auf dem bereits oben gezeigten Lazy Load Unveil.js. Die Integration ist denkbar einfach, Crazy Lazy muss lediglich installiert und aktiviert werden. Alles andere geschieht ganz von alleine.