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.