Lazy Load – Bilder beim Scrollen einer WordPress-Seite nachladen

Letztens fragte man mich, wie das mit dem langsamen Nachladen der Bilder auf meiner Seite funktioniert. "Ganz einfach!" antwortete ich. "Da schreibe ich mal ein paar Zeilen zu." Here we go:

Um die Bilder nachzuladen nutze ich ein Plugin für das Javascript-Framework jQuery. Das Plugin hört auf den schönen Namen Lazy Load und gibt es schon eine ganze Weile. Ich wundere mich ein wenig, dass es jetzt erst in Mode kommt. Grundidee des Plugins ist es gar nicht, die Bilder schön einblenden zu lassen. Eigentlich geht es darum, die Ladegeschwindigkeit der Seite beim ersten Laden zu erhöhen. Dazu werden zuerst nur die sichtbaren Bilder geladen und die weiteren Bilder dann beim scrollen.

Um das Plugin zu installieren sind nur wenige Schritte notwendig: Davon ausgehend, dass man jQuery bereits eingebunden hat, lädt man sich das Plugin schnell von der Lazy Load-Seite runter und packt es in den Ordner des eigenen WordPress-Themes. Anschließend bindet man die neue Datei dann mit folgender Code-Zeile in den Kopf der Seite (also in das head-Element).

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lazyload.js"></script>

Nun muss dem Script nur noch gesagt werden, welche Bilder eigentlich mit dem Effekt nachgeladen werden sollen. Bei mir sollen das alle großen Bilder in den Beiträgen sein. Da ich sonst alle Bilder im Layout per CSS eingebunden habe, kann ich das Plugin einfach auf dem img-Tag ansetzen.

 //Fauler Bildlader
if(!navigator.userAgent.toLowerCase().match('ipad')) {
  $("img").lazyload({effect : "fadeIn"});
}; 

Nun mag man sich wundern, was das if soll. Ganz einfach: Mir war aufgefallen, dass das iPad leider nicht mit dem Javascript zurechtkommt und statt der nachzuladenden Bildern nur das Fehlersymbol angezeigt wurde. Mit der kleinen Abfrage wird das Problem umgangen.

Für meinen Bedarf war es das dann auch schon. Auf der Plugin-Seite werden die weiteren Optionen des Plugins ausführlichst erklärt.