Lazy Load (Nachladen von Bildern beim Scrollen) – Webdesign-Tutorial

In diesem Webdesign-Tutorial geht es um das Nachladen von Bildern, sobald diese durch Scrollen in den Viewport – dem sichtbaren Bereich der Seite – gelangen. Diese Methode nennt man Lazy Loading.

Lazy Load von Appelsiini (JavaScript only): appelsiini.net/projects/lazyload
Unveil.js (für jQuery oder Zepto): luis-almeida.github.io/unveil/

Wenn eine Website viele Bilder einsetzt und diese alle direkt beim Aufruf geladen werden, dann werden oft mehrere Megabyte an Daten übertragen. Natürlich hat dies schlechte Auswirkungen auf die Ladezeit, sendet keine guten Signale Richtung SEO-Kriterium „Performance" und ist auch für Nutzer (z. B. bei mobilen Daten) eine Zumutung.

Mittels Lazy Load wird standardmäßig eine kleine Preloader-Grafik in den Image-Tag integriert. Über ein Data-Attribut wird die Quelle des eigentlichen Bildes angegeben. Das eingebundene JavaScript erledigt den Rest: Sobald das Bild im Viewport ist, wird die Data-Source in das eigentliche Source-Attribut geladen und das Bild angezeigt.

GIF-Preloader Animation erstellen: www.youtube.com/watch?v=4wG-iNZQFwU

Dieses Video ist auf Deutsch. I speak german in this tutorial.

neueres Video älteres Video