HTMLImageElement: decode() method

None.

A Promise which is resolved once the image data is ready to be used.

EncodingError

A DOMException indicating that an error occurred while decoding the image.

One potential use case for decode(): when loading very large images (for example, in an online photo album), you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new HTMLImageElement, setting its source to the full-resolution image's URL, then using decode() to get a promise which is resolved once the full-resolution image is ready for use. At that time, you can then replace the low-resolution image with the full-resolution one that's now available.

The following example shows how to use the decode() method to control when an image is appended to the DOM. Without a Promise-returning method, you would add the image to the DOM in a load event handler, such as by using the img.onload event handler, and by handling the error in the error event's handler.

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