So, mal wieder was aus dem Bereich Codes. Lazy-Loading von Bildern und Co. Was ist da denn derzeit so angesagt bzw. lässt sich kombinieren? Aktuell verwende ich eigentlich bLazy als fertiges Script. Performant ist das aber nicht wirklich, da es auf Scroll-Eigenschaften im Browserfenster reagiert und die somit ständig auswerten muss, ob ein Bild nun kommt oder nicht, er muss auswerten, wenn sich das Sichtfeld bewegt.
Daher habe ich nun schon seit 2 Jahren IntersectionObserver am laufen, die eigentlich zu 90% funktionieren. Wenn nicht, dann gibt es einen Fallback zu Lazy-Loading mit Scroll-Überwachung.
So, nun stößt Chrome und Opera vor und hat das ganze nun seit 3 oder 4 Versionen nativ im Browser, würde also gänzlich ohne Javascript funktionieren. Nur irgendwie scheitere ich da an einer Art Polyfill oder Abgrenzung, was wann wie genutzt wird. Klar, die Erkennung davon, was möglich ist, habe ich, das bringt aber nichts, weil Bilder rein HTML-technisch anders eingebunden werden müssen.
Für das bisherige Lazy-Loading wird als "src" nur ein Platzhalter gesetzt und die eigentliche URL kommt in "data-src". Ist das Bild dann nahe dem Sichbareich, werden die beiden Angaben getauscht, das Bild geladen.
Mit dem loading="lazy" Attribut muss die URL aber im "src" bleiben, nur dann kann sie geladen werden, sonst kommt nur der Platzhalter. Und genau hier scheitere ich gerade.
Hat einer eine Idee?
Klar könnte ich sagen, wenn loading="lazy" vorhanden ist, also ('loading' in HTMLImageElement.prototype) === true, dann soll das Script, das das Vorhandensein der Funktion testet, alle "data-src" nach "src" kopieren und den Rest dann dem Browser überlassen. So wie ich das aber bisher gesehen habe ist das einfache kopieren von "data-src" nach "src" von der Performance her schlechter, also es so zu lassen wie es ist und den IntersectionObserver machen zu lassen.
Mir scheint fast, als ob da was auf dem Markt kommt, das absolut nicht abwärtskompatibel ist. Fakt ist, wenn das HTML dazu passt, dann ist das neue loading="lazy" schneller und belastet den Browser weniger. Nur wenn man sein HTML direkt so erstellt, dann hat man keine Chance mehr für einen Fallback.
Einer eine Idee? Übersehe ich was?