Entwicklung & Design

jQuery Unveil: das wahrscheinlich kleinste Lazyload-Plugin der Welt

jQuery Unveil ist ein sehr schlankes Lazyload Plugin, das Bilder nachlädt, wenn sie im Viewport sichtbar werden. Alternativ können die Bilder auch mit Verzögerung oder mit einem Offset-Wert kurz bevor sie in den Viewport kommen, geladen werden. Wir stellen euch das Plugin vor.

jquery_unveil

Der Einsatz von Lazyload Techniken ist beliebt: Webseiten mit vielen Bildern nutzen diese Technik, um ihr Gewicht beim ersten Aufruf zu reduzieren. Dabei werden alle src-Attribute von img-Tags auf Platzhalter oder stark komprimierte Versionen der Bilder gelegt.

Sobald das Bild im Viewport sichtbar wird, wird das eigentliche Bild bzw. das Bild in höherer Qualität nachgeladen.

Unveil.js ist nur 1kb groß und bietet Unterstützung für die Auslieferung von Grafiken für Retina-Displays. Die Steuerung des Skriptes erfolgt über HTML5-Data-Attribute.

<img src="bg.png" data-src="img1.jpg" />
<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />

Das src-Attribut zeigt auf die Platzhaltergrafik. Mit data-src, hinterlegst du den Pfad zum eigentlichen Bild. Mit data-src-retina den Pfad zum Bild in Retina-Auflösung. Wer sich immer noch Sorgen um Benutzer mit reaktiviertem JavaScript macht, kann mit dem Noscript-Tag ein Fallback einbinden.

<noscript>
<img src="img1.jpg" />
</noscript>

Die Initialisierung des Skriptes erfolgt mit der bekannten jQuery Syntax.

$(document).ready(function() {
$("img").unveil();
})

Als Standard-Wert werden Bilder 200px bevor sie im Viewport sind, nachgeladen. Alternativ kann ein anderer Wert beim Aufruf des Skriptes übermittelt oder Bilder via JavaScript „manuell“ nachgeladen werden.

$("img").unveil(200);
$("img").trigger("unveil")

jQuery Unveil ist ein nützliches Leichtgewicht, das besonders für den Einsatz im Responsive Webdesign und anderen Projekten, die trotz vieler Bilder schnelle Ladezeiten erzielen sollen, eine wichtige Rolle spielen kann. Auf der Projektseite von jQuery Unveil erfährst du mehr über das Skript und kannst es direkt in Aktion erleben.

Weiterführende Links

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

7 Kommentare
marc.tissler
marc.tissler

data-src ohne präfx zu nutzen ist aber riskant. hab das selber schon in projekten verwendet. plugins sollten immer mit eigenem präfix ausgeliefert sein, ansonsten ist es ein schönes ding :)

Antworten
Sebastian Schmal
Sebastian Schmal

Wie gehen die Suchmaschinen damit um ?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.