Florian Fiegel 16. April 2009

Bilder später laden mit Lazy Load und jQuery

Das jQuery-Plugin Lazy Load lädt Bilder auf Wunsch erst unter bestimmten Bedingungen wie Scrollen oder Klicken nach. Damit stellt es das gerade  Gegenteil des Image-Preloadings dar. Erfinder Mika Tuupola hat sich nach eigenen Angaben von der ImageLoader Utility aus der Yahoo! UI Library inspirieren lassen.

Der Gedanke dahinter ist die Verkürzung von Ladezeit und gegebenenfalls unnötigen Serveranfragen. Der Browser lädt nur die Bilder, die gerade im Browser sichtbar sind, so dass der Nutzer schnell eine „fertige“ Seite zu sehen bekommt. Anfragen und Traffic können so auf das reduziert werden, was der Besucher tatsächlich sieht.

Funktionen

Das Laden der Bilder lässt sich mit Lazy Load an verschiedene Bedingungen knüpfen: Klicken, Abstand der unteren Kante des Browsers zum Bild in Pixeln oder ein simples Delay sowie beliebige weitere Events. Weiterhin lassen sich Effekte und Platzhalter nutzen um das Nachladen und einblenden entsprechend passend zu gestalten. Das Plugin kann auch innerhalb von Containern eingesetzt werden, so dass die gleiche Funktionalität zur Verfügung steht. Wer sich das Ganze mal in Aktion anschauen will, kann auf eine der zahlreichen Demos zurückgreifen: Delay, FadeIn-Effekt und Container

Einschränkungen

Das Plugin funktioniert auf Grund eines Bugs im Webkit leider nicht im Safari und anderen Webkit-Browsern. Unter jQuery 1.3.x werden im IE ebenfalls sämtliche Bilder geladen, der Autor rät deshalb bis zur Behebung des Problems zur Verwendung der Version 1.2.6. Weiterhin ist bei der Verwendung zusammen mit Mint zu beachten, dass der entsprechende Tag schon im Header der Seite untergebracht werden muss, da dieser am Ende der Seite ein Problem im Zusammenspiel erzeugt.

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

5 Kommentare

  1. Ich hab alle notwendigen Sachen in den Footer gepackt. Funktioniert ohne Probleme. Danke für den Tipp!

  2. Inzwischen scheint’s auch in Webkit-Browsern zu gehen: Google Chrome ist ja anscheinend einer und da funktioniert’s! Schönes Ding, werd‘ ich auch benutzen!

  3. Na ja, so neu ist das nun nicht. Für Prototype gibts das z.b. auch schon ein paar Jahre: http://www.bram.us/projects/js_bramus/lazierload/ ;)

  4. Netter Beitrag. Hat jemand was vergleichbares für Mootools?

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.