bLazy.js

Datum: 26. September 2016
Autor*in: Benjamin Hofmann


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

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


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Infrastructure as Code: Prolog

Autor*in: Bastian Schwarz


Technologie // Über den Tellerrand


Da unsere Developer VM nun auch schon wieder einige Zeit auf dem Buckel hat habe ich mich die letzten Wochen viel mit dem Thema Virtualisierungsmanagement und Provisioning beschäftigt. Mit was?! Beides klingt hochtrabender als es tatsächlich ist. Letztendlich geht es dabei um 2 Themenbereiche: Das Erstellen von virtuellen Umgebungen Das Einrichten und Konfigurieren dieser Umgebungen Das alles gab …


Beitrag lesen
27
MRZ
17

Messung Dokumentgröße

Autor*in: Bastian Schwarz


Projekte // Technologie


Seit kurzem scheint die Anzeige der Dokumentgröße über die Web Developer Toolbar im Firefox nicht mehr korrekt zu funktionieren. Es wird häufig die Komprimierung von Scripten / Stylesheets nicht mehr korrekt erkannt.  Alternative Google Chrome – Developer Tools  Kurzanleitung Über Tools – Entwicklertools öffnen, auf „Network“ Tab wechseln, Seite mit Strg+F5 neuladen. Jetzt sieht man …


Beitrag lesen
16
APR
13

Caching – Probleme mit Permissions

Autor*in: Florian Müller


Technologie


Ich war gerade an einem Ticket um eine Lösung für das leidige Thema des Caching der Autosuggest zu lösen. Das grundlegende Problem ist, dass das Autosuggest recht umfangreich ist (gecached bis zu 2MB). Sollte nun ein User ein Wort eingeben und kein Autosuggest vorhanden sein, wurde dieser gebaut und gecached. Die hat auch mal gerne eine …


Beitrag lesen
13
JAN
17