Как нативно в js добавлять на страницу картинку, которая уже была один раз загружена без её повторной загрузки с сервера?

Question

[Ingernirated]

Доброй ночи, товарищи
Подскажите, загрузилась первый раз картинка, как её повторно размножать на странице, не загружая её снова с сервера?

Answer 1

[Stalker_RED]

Если уже была вставлена картинка <img src="123.jpg">, и где-то в пределах страницы повторяется обращение к этому-же адресу (src), то повторных запросов не будет. Это встроено во все современные браузеры, ничего особого делать не нужно.

При обновлении страницы повторный запрос может произойти, если картинка не попала в кеш браузера по каким-то причинам. Например, если кеш отключен, или он слишком мал, или у картинки выставлены заголовки, запрещающие кеширование.

Comments

[Ingernirated]

т.е. если у меня в 3 блоках была ссылка на background src="123.jpg"
то при создании через createElement нового блока и добавление ему background src="123.jpg", никакой повторной загрузки не произойдёт и она добавиться моментально?
а как-то можно визуально убедиться, что она скачалась с сервера один раз, а дальше лишних мб при её размножении сайт жрать уже не будет?

[Сергей delphinpro]

Ingernirated: Визуально можно посмотреть в средствах разработчика в браузере, вкладка "Network / Сеть"