✨ Предварительная загрузка изображений с помощью JavaScript

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

Пять способов:

new Image() классика. Запускает загрузку немедленно, можно подписаться на onload. Минус: полагается на HTTP-кэш. Если сервер отдает Cache-Control: no-store будет два запроса.

<link rel="preload" /> надежнее. Использует отдельный preload cache, независимый от Cache-Control. Браузер не дублирует запрос, даже если изображение понадобилось до завершения загрузки.

Скрытый div с background-image рабочий, но странный вариант. Важно: display: none отменяет загрузку, visibility: hidden нет.

Cache API максимальный контроль над кэшем. Минус: кэш не очищается автоматически между перезагрузками.

fetch() не нужно управлять кэшем вручную, однако по-прежнему зависит от Cache-Control сервера.

👉 https://habr.com/ru/companies/timeweb/articles/1020138/