Lazy loading images ohne jQuery

Lesezeit: 2 Minuten (550 Wörter)

Warum benutzen wir kein jQuery für lazy loading?

"Was zum Teufel soll das, warum verwenden wir denn nicht einfach eines der vielen jQuery-Plugins, um Bilder nachzuladen?" – vielleicht fragt ihr euch das gerade. Und natürlich steht es jedem frei, es auch so zu tun. Es gibt auch gute Gründe, wann es Sinn macht auf jQuery Plugins zurück zu greifen: 1. wenn ihr bereits jQuery in eurem Web-Projekt verwendet. 2. ... es tut mir Leid, aber mehr Gründe gibt es wirklich nicht!

Also: falls ihr bisher noch kein jQuery verwendet, solltet ihr auch darauf verzichten. Warum? – Ganz einfach:

jQuery wurde besser aber auch größer

jQuery Bibliothek wurde über die letzten Jahre immer weiter entwickelt. Zum Zeitpunkt der Veröffentlichung dieses Beitrags ist die Version 2.1 von jQuery aktuell. Insgesamt muss man anerkennen, dass die Bibliothek von John Resig sehr beeindruckend ist und einen Meilenstein in der JavaScript Frontend-Enticklung darstellt. Trotzdem: es macht keinen Sinn, solch eine große Bibliothek zu laden, wenn man nur einen Bruchteil an Code später daran verwendet.

Auf der Website von Mathias Bynens findet ihr eine Tabelle, die die Entwicklung von jQuery und die jQuery Dateigröße von Version 1.2 bis 2.1.3 gegenüberstellt. Während der Entwicklung wuchs die Dateigröße auf 214 KB an – was im Vergleich zu den 282 KB der 1.11 Version immerhin noch eine Verbesserung darstellt, aber trotzdem noch eine Menge Daten bedeutet, die erstmal geladen werden müssen.

Etwas Performance lässt sich noch heraus holen, wenn man auf die komprimierte Version von jQuery zurück greift und auf dem Webserver GZIP aktiviert, doch auch dann sind es noch über 70 KB (71.58 KB). In Zeiten von DSL, Glasfaser und LTE werden jetzt einige müde lächeln – doch in Zeiten, in denen nahezu jeder Webmaster die Basics von SEO beherrscht, stellt Performance immer noch eine wichtige Stellschraube dar. Stichwort SERP.

Echo.js – JavaScript lazy loading

Echo.js von Todd Motto ist ein ziemlich gutes lazy loading script. Vor allem aber ist es eins: einfach zu handhaben! Ihr fügt einfach zu allen gewünschten img-Tags ein weiteres Attribut hinzu, ladet und initialisiert das Script am Ende es HTML-Dokumentes – et voilà: fertig sind die nachgeladenen Bilder mit JavaScript!

Neben den modernen Browsern hat Todd Motto sogar den Dinosaurier unter den Browsern lauffähig gemacht: den "Browseratops" IE7.

Es ist so klein, kaum zu glauben

Der größte Vorteil ist ganz klar die Dateigröße: echo.js ist so klein, dass man die Datei sogar fast auf dem Server verlieren kann! Komprimiert beträgt die Dateigröße weniger als 1 KB! Das heißt, das Script ist 70 mal kleiner als die jQuery Bibliothek. Nehmen wir uns einen Moment Zeit und Danken Todd Motto dafür, dass er dies geniale JavaScript erschaffen hat.

echo.js einbinden: super einfach

echo.js ist sehr einfach zu verwenden: ihr könnt wie gewohnt für eure Bilder den HTML Tag verwenden. Allerdings müsst ihr statt des Attributs src="image.jpg" nun den Pfad zum Bild in einem speziellen Attribut angeben: data-echo.

<img src="loader.gif" data-echo="image.jpg">

Das Attribut src wird weiterhin verwendet, allerdings ist hier die URL eines Loaders oder Spinners anzugeben, der angezeigt wird während das eigentliche Bild geladen wird.

Nun müssst ihr noch am Ende des HTML-Dokuments das echo.js Script verlinken und echo.js initialisieren:

<script src="js/echo.js"></script>
<script>
echo.init({
  offset: 100,
  throttle: 250,
  unload: false
});
</script>

Das war es auch schon! Wer echo.js einmal live sehen möchte, kann sich hier die echo.js demo ansehen.