HTMLImageElement: decoding Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

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.

In diesem Artikel

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.

js
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:

js
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:

js
const img = new Image();
img.decoding = "async";
img.src = "img/logo.png";
document.body.appendChild(img);

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLImageElement
Konstruktor
1. Image()
Instanzeigenschaften
Instanzmethoden
1. decode()
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLImageElement: decoding Eigenschaft

In diesem Artikel

Wert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN