HTMLImageElement: метод decode()

Метод decode() интерфейса HTMLImageElement возвращает Promise, который разрешается, когда изображение декодировано и его безопасно добавить в DOM.

Это можно использовать для начала загрузки изображения до того, как прикрепить его к элементу в DOM (или добавить его в DOM как новый элемент), чтобы изображение можно было отобразить сразу после добавления в DOM. Это, в свою очередь, предотвращает задержку при отрисовке следующего кадра после добавления изображения в DOM, пока изображение загружается.

Нет.

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) => {
    // Do something with the 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);
}

Это особенно полезно, если вы динамически меняете существующее изображение на новое, а также предотвращает задержку ненужных отрисовок вне этого кода во время декодирования изображения.

• Что фактически делает атрибут декодирования изображения? на tunetheweb.com (2023)
• Свойство HTMLImageElement.decoding