Und schon wieder eine kleine Standalone-Vanilla-JS-Library, die ich am Wochenende entdeckt habe: bLazy.js (GitHub, Demo)

In dem ca. 1,5 KB Skript befindet sich die komplette Logik, um Bilder erst dann zu laden wenn sie im Viewport angezeigt werden. Und nicht nur Bilder, sondern auch I-Frames und andere Embeds können dynamisch nachgeladen werden. Und es funktioniert sogar bis hinunter in den IE7, sollte der noch von einem Portal benötigt werden.

Das Ganze läuft auch hervorragend zusammen mit dem <picture>-Element und auch mit dem srcset-Attribut von Bildern. Auch Elemente innerhalb von Slidern oder dynamisch nachgeladene Elemente lassen sich damit erst bei Bedarf laden. Und auch hier ist eine Integration über NPM und RequireJS möglich.

Benjamin Hofmann

Senior Web-Entwickler bei infomax am Standort Bremen

Share
Published by
Benjamin Hofmann

Recent Posts

Augmented Reality trifft TYPO3: POIs neu erleben

Wie bringt man POIs auf mobilen Geräten intuitiv und platzsparend zur Anzeige? Diese Frage stand…

3 Tagen ago

☀️🌧️ Sommer-(Regen)fest 2025 – Wenn das Wetter nicht mitspielt, aber das Team umso mehr!

Ende Juni war es endlich soweit: Das gesamte #Teaminfomax kam wieder zusammen - mit Kolleg*innen…

3 Wochen ago

imx.Platform News: Neue Funktionen für mehr Effizienz und Flexibilität

Mit dem aktuellen Release der imx.Platform News erwarten Sie zahlreiche neue Features und Verbesserungen, die…

3 Wochen ago

Eindrücke vom DestinationCamp 2025 in Düsseldorf

Anfang Juni fand wieder das Destination Camp der netzvitamine statt. Dieses Jahr ging es nach…

4 Wochen ago

imx.Platform Lab 2025 – inspirierend und interaktiv

In der ersten Aprilhälfte fand erneut unser alljährliches Anwenderforum aka imx.Platform Lab statt. An zwei…

4 Monaten ago

imx.Platform News: Weiterentwicklungen und neue Features

Es stehen neue Funktionen, Erweiterungen und Optimierungen unserer Module und Features in der imx.Platform für…

4 Monaten ago