Coding

🚬 Жиза... Тред, который поймут только миллениалы

41 views09:53

HTMLImageElement.decode() — подготовка изображения до появления в DOM!

При динамической подстановке изображений часто возникает ситуация, когда элемент уже добавлен в DOM, но браузер ещё не завершил декодирование изображения. В результате пользователь может увидеть пустую область, задержку появления контента или заметное изменение содержимого после завершения подготовки картинки.

Для таких случаев существует метод decode(), который позволяет дождаться момента, когда изображение будет декодировано браузером и готово к безопасному отображению. Создадим объект изображения:
const image = new Image();

image.src = '/images/photo.jpg';

await image.decode();

После установки src браузер начинает загрузку ресурса. Метод decode() не является механизмом загрузки изображения — он ожидает завершения загрузки и последующего декодирования, чтобы браузер не выполнял эту работу непосредственно в момент первого отображения.

После успешного выполнения Promise изображение можно добавлять в DOM:
const image = new Image();

image.src = '/images/photo.jpg';

await image.decode();

document.body.append(image);

В таком случае браузеру не требуется выполнять декодирование в момент первого отображения элемента, что помогает избежать визуальных скачков при динамическом обновлении интерфейса.

Метод особенно полезен при динамической замене изображений:
const preview = document.querySelector('.preview');

const nextImage = new Image();

nextImage.src = '/images/next.jpg';

await nextImage.decode();

preview.replaceWith(nextImage);

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

Важно учитывать разницу между загрузкой и декодированием. Событие load сообщает о завершении загрузки ресурса, а decode() отвечает за готовность изображения к отображению без дополнительной подготовки в момент рендера. Например:
image.onload = () => {
console.log('Изображение загружено');
};

await image.decode();

Эти механизмы решают разные задачи и могут использоваться вместе в зависимости от требований интерфейса.

При ошибке загрузки или невозможности декодировать изображение Promise будет отклонён:
try {
await image.decode();
} catch (error) {
console.error('Не удалось подготовить изображение', error);
}

Важно учитывать, что decode() не решает проблему layout shift (CLS), если размеры изображения заранее неизвестны. Для предотвращения скачков интерфейса рекомендуется задавать размеры через width / height или использовать aspect-ratio. Например:
<img src="/images/photo.jpg" width="800" height="600">

decode() широко применяется в современных веб-интерфейсах: галереях, слайдерах, редакторах изображений и компонентах с динамическим обновлением контента, где важно контролировать момент появления изображения.

🔥 HTMLImageElement.decode() позволяет синхронизировать отображение изображения с процессом его подготовки браузером и избежать визуальных артефактов при динамическом обновлении DOM.

📣 Code Ready | #практика

42 views12:54