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.

10 Reaktionen zu Lazy Load – Bilder beim Scrollen einer WordPress-Seite nachladen

  1. Ich lasse die Bilder auf der Setup-Seite nun auch lazy loaden. ;)

    Allerdings nutze ich nicht das Plugin, da es auf der Startseite nicht mit dem Flickr-Sidebarwidget harmoniert.

  2. Wie hast du den Effekt dann realisiert? Liegt es an dem Plugin selbst oder hast du es nur nicht explizit auf die Setup-Bilder angesetzt?

    :-) Sowas darf man auch gerne sagen. Gibt es einen speziellen Grund für das nicht-gefallen? Das neue Theme passt allerdings besser in meine Blog-Strategie, glaube ich. Vielleicht sollte ich da mal ein paar Worte zu verlieren.

  3. Ich find den Effekt zwar lustig, aber mich nervt er. Beim Scrollen beweget sich immer so viel. Mag ich nicht; ist zu unruhig.
    Aber jeder, wie er will, nich? ;)

  4. Da hat mir @apple_gadgets geholfen. Der hat den Code des Plugins bei mir in die custom_functions.php eingefügt und die Ausführung auf die Setup-Seite beschränkt. (via „is_page(‚Setup‘)

    Zu deinem Theme: das Minimalistische des alten Themes hat mir sehr gefallen. Hier stört mich die Menüleiste und der Footerbereich.

  5. Andi: Richtig, jeder wie er will. :-) Beim schnellen Scrollen finde ich es auch ein wenig anstrengend. Aber ich gehe sowieso davon aus, dass der Effekt wieder rausfliegt, wenn er zu sehr Mainstream geworden ist.

    Ad: Das klingt nach einer klugen Lösung. Die Menüleiste oben soll dem Benutzer die Möglichkeit geben, gezielt für ihn interessante Themen anzuwählen. Mal schauen ob das genutzt wird. Mit der Headline „der tag und ich“ und dem darunter liegenden Menü bin ich auch noch nicht zufrieden, da bin ich für Ideen dankbar. Der Footer ist so aber schon nach meinem Geschmack, zumindest was den Inhalt angeht. Farblich könnte sich da eventuell noch was tun.

  6. ich hab mal ne frage, ist eine übertragung auf userscript möglich(firefox addon greadmonky), dann könnte man das auf alle seiten im netz anwenden. wie sollte das dann aussehen?

Schreibe einen Kommentar

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