So, mal einen neuen Tread dazu. Vielleicht sieht da ja einer was vor lauter Bäumen, ich leider nicht mehr.
An sich erst mal alles gut. Eingebunden ist das IMG im HTML wie folgt:
<img class="b-lazy" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/bilder/geranien-aus-keller-k.jpg" width="300" height="225" />
Die Klasse "b-lazy" macht hier eigentlich nichts, als das Bild erst mal auf hidden zu setzen. Die Größenangaben im HTML direkt passen. Das 1x1 Pixel wird also gestaucht, aber egal, sieht man ja nicht. Der effektive Raum, der freigelassen wird, stimmt.
So, nun das Problem im zeitlichen Ablauf.
1. Anfangs stimmt alles
2. CSS wird geladen. Passt auch noch alles, denn keine Klasse macht irgendwas mit Größen, nur Sichtbarkeit
3. Javascript wird gelesen. Erkennt dass natives Lazy-Loading verfügbar ist und ändert den Quelltext. Das Bild aus "data-src" wird in "src" eingefügt und die zusätzliche Klasse "b-loaded" gesetzt. Diese beinhaltet nur die Angaben "height: auto;" und setzt das ganze eben wieder auf "visible". Nun kommt es aber zum Fehler, denn "auto" veranlasst nun den Platzhalter, auf eine Größe von 300x300 zu gehen, das im HTML-Code angegebene 225 wird dann ignoriert. Das Bild shifted, der Platzhalter wird zu groß.
4. Das dauert dann 10-50ms, sehr unterschiedlich, bis der Browser dann das echte Bild lädt. Wenn das dann da ist, dann passt die Höhe wieder, denn das echte Bild hat eben die height="225".
So, hat nun einer eine Ahnung, wie ich das Problem aus Punkt 3 umgehen kann?
Ich könnte das "height: auto;" einfach weglassen, dann ist das Problem auch weg, aber ein neues kommt dann. Dann sind die Bilder nämlich nicht mehr responsive
Es gibt leider auch keine Möglichkeit zu erkennen, wann das Bild nativ geladen ist. Sonst könnte man die Klasse "b-loaded" ja erst später einfügen. Wie aber gesagt, es gibt beim nativen LazyLoading keine Rückmeldung. Wohin auch, das geht ja alles ganz ohne Script
Den Platzhalter-Pixel auf einen anderen Formfaktor zu bringen ist auch keine wirkliche Option, denn die eigentlichen Bilder sind alles komplett unterschiedliche Formate und ich weiß vorher nicht, was kommt oder ich brauche, bzw. wären das viel zu viele unterschiedliche. Zudem würde es ein Pixel mit 1x0,66 oder 1,33x1 ja gar nicht geben