Lazy Load

Lazy Load Plugin für jQuery + Trick

Im letzten Beitrag haben wir bereits darüber gesprochen wie Bilder nie größer als die maximale Screen-Breite ausgegeben werden, nun kommt es aber vor, dass Bildschirme 1920 Pixel (oder mehr) breit sind und Bilder oft über die gesamte Breite gehen, das bedeutet natürlich extrem große Filesize vor allem bei (vertikal) langen Websiten. Abhilfe schafft hier das jQuery Plugin „Lazy Load„.

Lazy Load verzögert das Laden von Bildern auf (vertikal) langen Websites, Bilder die außerhalb des Viewports liegen werden erst geladen wenn der User hinscrollt. Was gerade auch bei langen Blog-Eintragen interessant sein kann.

Installation

Das Plugin kann vom Github-Repsitory heruntergeladen werden und ist von jQuery abhängig, d.h. zuerst muss jQuery eingebunden werden und danach das Plugin JS-File, dies kann mit folgendem Code im Footer der jeweiligen Datei erreicht werden:


<script src="jquery.js"></script>;
<script src="jquery.lazyload.js"></script>

Danach muss das Plugin nur noch initialisiert werden und auf alle Bilder einer bestimmten Klasse angewendet werden:


<img class="lazy" data-original="example.jpg" />

$(function() {
    $('img.lazy').lazyload();
}

Von nun an laden Bilder mit der Klasse „lazy“ erst wenn sie in den Viewport gescrollt werden.

Trick

Wie man oben im Code sieht verwendet das Plugin nicht das „src“-Feld im HTML-img Tag sondern ein spezielles „data-original“ Feld. Was uns die Möglichkeit gibt das „src“-Feld trotzdem zu verwenden.

Doch welchen Sinn würde dies ergeben? Ich persönlich mag es nicht wenn beim ersten Laden der Website keine Bilder angezeigt werden, darum gebe ich oft eine stark  verkleinerte Version des Bildes im „data-original“-Tag in den „src“-Tag. Somit wird beim ersten Laden der Website nur das stark verkleinerte Bild (im besten Fall aber hochskaliert auf die originale Größe) angezeigt (und geladen) und kurz danach dann „original“-Bild.

Lazy Load WordPress Plugin

Wie man sich schon denken kann, gibt es bereits zahlreiche WordPress-Plugins, welche die LazyLoad – Funktionalität direkt in WordPress integrieren:

  • Lazy Load
    Simple Lösung, einfach installieren und aktivieren und automatisch werden alle Bilder „lazy-geloaded“
  • BJ Lazy Load
    Umfangreiche Lösung, im Gegensatz zu Lazy Load gibt es hier einige Einstellungs-Möglichkeiten (wie zum Beispiel Default-Placeholder).

Hier noch ein paar Bilder welche „lazy-loaden“ (mit sehr großer Filesize):

Scare Bear

Gorilla Mac

Taxi

Facebook
Google+
http://www.stefan-rammer.at/2016/10/18/lazy-load-plugin-fuer-jquery-trick/
Twitter
RSS
Follow by Email

Stefan

Webdeveloper, Wordpress, PHP, MYSQL

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.