Lazy Load – Bilder beim Scrollen einer WordPress-Seite nachladen

Letz­tens fragte man mich, wie das mit dem lang­sa­men Nach­la­den der Bil­der auf mei­ner Seite funk­tio­niert. „Ganz ein­fach!“ ant­wor­tete ich. „Da schreibe ich mal ein paar Zei­len zu.“ Here we go:

Um die Bil­der nach­zu­la­den nutze ich ein Plu­gin für das Javascript-Framework jQuery. Das Plu­gin hört auf den schö­nen Namen Lazy Load und gibt es schon eine ganze Weile. Ich wun­dere mich ein wenig, dass es jetzt erst in Mode kommt. Grund­idee des Plugins ist es gar nicht, die Bil­der schön ein­blen­den zu las­sen. Eigent­lich geht es darum, die Lade­ge­schwin­dig­keit der Seite beim ers­ten Laden zu erhö­hen. Dazu wer­den zuerst nur die sicht­ba­ren Bil­der gela­den und die wei­te­ren Bil­der dann beim scrollen.

Um das Plu­gin zu instal­lie­ren sind nur wenige Schritte not­wen­dig: Davon aus­ge­hend, dass man jQuery bereits ein­ge­bun­den hat, lädt man sich das Plu­gin schnell von der Lazy Load-Seite run­ter und packt es in den Ord­ner des eige­nen WordPress-Themes. Anschlie­ßend bin­det man die neue Datei dann mit fol­gen­der Code-Zeile in den Kopf der Seite (also in das head–Ele­ment).

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

Nun muss dem Script nur noch gesagt wer­den, wel­che Bil­der eigent­lich mit dem Effekt nach­ge­la­den wer­den sol­len. Bei mir sol­len das alle gro­ßen Bil­der in den Bei­trä­gen sein. Da ich sonst alle Bil­der im Lay­out per CSS ein­ge­bun­den habe, kann ich das Plu­gin ein­fach auf dem img–Tag anset­zen.

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

Nun mag man sich wun­dern, was das if soll. Ganz ein­fach: Mir war auf­ge­fal­len, dass das iPad lei­der nicht mit dem Java­script zurecht­kommt und statt der nach­zu­la­den­den Bil­dern nur das Feh­ler­sym­bol ange­zeigt wurde. Mit der klei­nen Abfrage wird das Pro­blem umgangen.

Für mei­nen Bedarf war es das dann auch schon. Auf der Plugin-Seite wer­den die wei­te­ren Optio­nen des Plugins aus­führ­lichst erklärt.