HTMLImageElement: decode()

Baseline

20201

decode() HTMLImageElement DOM (Promise)

DOM DOM DOM DOM

decode()

Promise undefined

EncodingError: DOMException

decode() HTMLImageElement URL decode()

decode() DOM

const img = new Image();
img.src = "nebula.jpg";
img
  .decode()
  .then(() => {
    document.body.appendChild(img);
  })
  .catch((encodingError) => {
    // 
  });

: Promise load DOM error

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

decode() DOM

async function getImage() {
  const img = new Image();
  img.src = "img/logo.png";
  await img.decode();
  document.body.appendChild(img);
  const p = document.createElement("p");
  p.textContent = "Image is fully loaded!";
  document.body.appendChild(p);
}


HTML # dom-img-decode-dev

What does the image decoding attribute actually do? (tunetheweb.com, 2023)
HTMLImageElement.decoding

MDN

MDN 2025722

GitHub

HTML DOM API
HTMLImageElement
1. Image()
1. decode()
HTML DOM
1. JavaScript queueMicrotask()
2. In depth: Microtasks and the JavaScript runtime environment