HTMLImageElement: decoding Eigenschaft

Wert

Ein String, dessen Wert sync, async oder auto ist. Fr ihre Bedeutungen siehe die HTML-Referenz des <img>.

Beispiele

Im unten stehenden Beispiel wird wahrscheinlich ein leeres Bild auf der Seite angezeigt, whrend 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 Einfgen 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 Lsung ist jedoch, die HTMLImageElement.decode()-Methode zu verwenden, um dieses Problem zu lsen. Sie bietet eine Mglichkeit, ein Bild asynchron zu dekodieren und es erst dann in das DOM einzufgen, wenn es vollstndig heruntergeladen und dekodiert ist, wodurch das oben erwhnte Problem mit dem leeren Bild vermieden wird. Dies ist besonders ntzlich, wenn Sie ein vorhandenes Bild dynamisch durch ein neues ersetzen und verhindert auch, dass nicht verwandte Render-Prozesse, die auerhalb dieses Codes liegen, aufgehalten werden, whrend 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

Browser-Kompatibilitt

Siehe auch

• Die HTMLImageElement.decode()-Methode
• Das <img>-Element decoding-Attribut
• What does the image decoding attribute actually do? auf tunetheweb.com (2023)