Gibt es in JavaScript eine Möglichkeit, die naturalWidth eines HTMLImageElement abzurufen, sobald es verfügbar ist, nach Beginn des Ladevorgangs, aber bevor das Ladeereignis ausgelöst wird?
Ein langsam ladendes JPG wird beispielsweise ungefähr wie folgt geladen:
- Rendern HTML-Element
. img.naturalWidth ist 0.
- Empfangen Sie die ersten paar Bytes, möglicherweise wird noch nichts angezeigt, daher ist img.naturalWidth immer noch 0.
- Erhalten Sie genügend Bytes, damit die Abmessungen bekannt sind; Ändern Sie den gerenderten Begrenzungsrahmen. img.naturalWidth ist jetzt der korrekte Wert.
- Rendern Sie die Bilddaten schrittweise von oben nach unten und von niedriger bis hoher Qualität, bis das gesamte Bild geladen ist.
- Zum Schluss wird das Ladeereignis ausgelöst.
Im Grunde möchte ich auf Schritt 3 „lauschen“. Ein ResizeObserver ist fast das, was ich will, aber er wird nicht ausgelöst, wenn das Bild zufällig genau 300 x 150 Pixel groß ist, da dies die standardmäßige gerenderte Größe für ein img-Element ist, das noch nicht geladen wurde.
Ich möchte etwas, das ausgelöst wird, egal ob das Bild 300 x 149 Pixel oder 300 x 150 Pixel groß ist. Bearbeiten: Ich denke, das könnte ein Chrome-Fehler sein, siehe Kommentare.
Mobile version