Drücke die Tasten ◄ ► für weitere Artikel  

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: das wahrscheinlich kleinste Lazyload-Plugin der Welt

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 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

130 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
5 Antworten
  1. von Dustin Deus via facebook am 24.06.2013 (14:01Uhr)

    Minimalistisch, aber keinen ganzen Artikel Wert. Das Plugin schreibt man in 30min, der größte Aufwand war das schön reden und dieser Artikel :D

  2. von web frontend | Annotary am 28.06.2013 (23:00Uhr)

    [...] Publisher More from Patrick Kohan: gaming linux LaTeX desktop Sort Share t3n.de       4 minutes [...]

  3. von Ultrasonic-Networking: Übertragen wir D… am 10.08.2013 (14:31Uhr)

    […] jQuery Unveil: das wahrscheinlich kleinste Lazyload-Plugin der Welt – t3n News […]

  4. von marc.tissler am 10.08.2013 (15:29Uhr)

    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 :)

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Plugin
jQuery: 13 Plugins für euer nächstes Webprojekt
jQuery: 13 Plugins für euer nächstes Webprojekt

Webentwicklung ohne JavaScript, im Besonderen jQuery, ist heute fast nicht mehr vorstellbar. Deswegen zeigen wir euch 13 jQuery-Plugins, die ihr vielleicht noch nicht kennt, aber unbedingt... » weiterlesen

Social Locker: Mächtiges Plugin verspricht Webseiten mehr Reichweite in Sozialen Netzwerken
Social Locker: Mächtiges Plugin verspricht Webseiten mehr Reichweite in Sozialen Netzwerken

Social Locker ist ein WordPress-Plugin, das es auch als jQuery-Version gibt und mit dem ihr eure Nutzer per Social-Media-Aktion für bestimmte Inhalte bezahlen lassen könnt. Was damit genau möglich. ... » weiterlesen

Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker
Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker

Die JavaScript-Bibliothek jQuery erleichtert uns zweifellos das Leben als Entwickler. Der enorme Funktionsumfang und die vergleichsweise hohe Dateigröße stehen bei manchen Projekten aber nicht im... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen