Допустим, на странице есть простой тег img:
<img src="img/1.png" alt="" class="img">
Затем в скрипте я создаю новый объект изображения, и загружаю в него другую картинку.
var newImg = new Image();
newImg.src = "img/2.png";
Но как правильнее будет заменить имеющуюся на странице картинку новой, чтобы не вызвать повторную загрузку этой картинки?
UPD. (Дополню) Если делать самым очевидным способом - присвоением src, то все работает, но иногда(далеко не всегда) происходят новые запросы на получение картинки. Сервер на них отвечает кодом 304, загрузки при этом не происходит, но факт лишнего запроса остается. Если такие замены будут происходить часто, и их на странице будет несколько, то возможны потенциальные проблемы.
Еще вариант с удалением изначальной картинки, и вставки на ее место новой из объекта:
var img = $('.img');
var parent = img.parent();
img.remove();
parent.append(newImg);
Таким способом лишних запросов не происходит вообще, но минус в том, что если были повешены события на изначальную картинку, то они слетят
src