HTMLImageElement: decoding Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Die decoding-Eigenschaft der HTMLImageElement-Schnittstelle gibt dem Browser einen Hinweis darauf, wie das Bild dekodiert werden soll. Genauer gesagt, ob es warten soll, bis das Bild dekodiert ist, bevor andere Inhaltsaktualisierungen präsentiert werden. Sie spiegelt das decoding-Inhaltsattribut des <img>-Elements wider.
Wert
Ein String, dessen Wert sync, async oder auto ist. Für ihre Bedeutungen siehe die HTML-Referenz des <img>.
Beispiele
Im unten stehenden Beispiel wird wahrscheinlich ein leeres Bild auf der Seite angezeigt, während das Bild heruntergeladen wird. Das Setzen von decoding wird dies nicht verhindern.
const img = new Image();
img.decoding = "sync";
img.src = "img/logo.png";
document.body.appendChild(img);
Das Einfügen eines Bildes nach dem Herunterladen kann die decoding-Eigenschaft relevanter machen:
async function loadImage(url, elem) {
return new Promise((resolve, reject) => {
elem.onload = () => resolve(elem);
elem.onerror = reject;
elem.src = url;
});
}
const img = new Image();
await loadImage("img/logo.png", img);
// Using `sync` can ensure other content is only updated with the image
img.decoding = "sync";
document.body.appendChild(img);
const p = document.createElement("p");
p.textContent = "Image is fully loaded!";
document.body.appendChild(p);
Eine bessere Lösung ist jedoch, die HTMLImageElement.decode()-Methode zu verwenden, um dieses Problem zu lösen. Sie bietet eine Möglichkeit, ein Bild asynchron zu dekodieren und es erst dann in das DOM einzufügen, wenn es vollständig heruntergeladen und dekodiert ist, wodurch das oben erwähnte Problem mit dem leeren Bild vermieden wird. Dies ist besonders nützlich, wenn Sie ein vorhandenes Bild dynamisch durch ein neues ersetzen und verhindert auch, dass nicht verwandte Render-Prozesse, die außerhalb dieses Codes liegen, aufgehalten werden, während das Bild dekodiert wird.
Durch die Verwendung von img.decoding = "async" kann verhindert werden, dass andere Inhalte nicht angezeigt werden, wenn die Dekodierzeit lang ist:
const img = new Image();
img.decoding = "async";
img.src = "img/logo.png";
document.body.appendChild(img);
Spezifikationen
| Specification |
|---|
| HTML # dom-img-decoding |
Browser-Kompatibilität
Siehe auch
- Die
HTMLImageElement.decode()-Methode - Das
<img>-Elementdecoding-Attribut - What does the image decoding attribute actually do? auf tunetheweb.com (2023)