Lazy loading image test

Diese Seite dient als Test und Demonstration meines Lazy loading image widget.

Eine auf interaktiven Websites häufig benötigte Funktion ist so etwas wie isElementVisible. Irgendetwas z.B. eine Animation soll erst angestoßen werden, wenn das Element im Viewport auftaucht. Dafür gibt es eine sehr gute React Komponente, die ich heute in #Scrivito eingebunden habe.

https://github.com/AvraamMavridis/react-intersection-visible

Insbesondere für Counter ist diese Funktion ein Muss.

Auf unserer Startseite könnt ihr das Verhalten beobachten, wenn ihr ein wenig runterscrollt. Die React Komponente stellt Event Handler wie onShow und onHide zur Verfügung. Den onHide Handler kann man nutzen, um z.B. den Counter zurückzusetzen. Scrollt man dann so, dass das Element wieder im Viewport erscheint, beginnt der Counter wieder von vorn.

Die Anwendungsmöglichkeiten für diese Komponente sind unzählig, z.B. für Infinite Scroll als Pagination Ersatz, um Videos erst abzuspielen, wenn diese im sichtbaren Bereich erscheinen oder für Lazy Loading.

Heute habe ich mich dran gemacht ein Image Widget mit Lazy Loading zu entwickeln. Und voilá - https://www.mdwp.de verfügt jetzt über Image Lazy Loading. Kann ich jeder Scrivito Site zur Verfügung stellen. Gerade bei bildlastigen Sites bringt das einen enormen Performance-Boost.

Um mein neues Scrivito Image Widget mit Lazy Loading zu testen, habe ich diese Testseite erstellt. Beim Aufruf der Seite werden 133 KB an Bilddaten übertragen, obwohl auf der Seite Bilder mit einer Gesamtgröße von 24 MB sind. Durch Lazy Loading ist das dann auch auf Smartphones ohne Wlan kein Problem.