При смене картинок через js они грузятся каждый раз заново
Есть галерея, которая переключается с помощью опций. В зависимости от опции в галерею загружается коллекция соотвествующих картинок. Пример.
images_array.forEach(function(item){
html+='<div class="item">';
html+='<a href="'+item.popup+'" class="popup-image">';
html+='<img src="'+item.image+'" alt="'+item.title+'">';
html+='</a>';
html+='</div>';
});
$gallery.html(html);
Вопрос в следующем. Почему если повторно загрузить картинки, которые грузились ранее, они начинают скачиваться заново, а не берутся из кеша браузера и как это решить? Еще пример с большими картинками.
var images = ['https://effigis.com/wp-content/uploads/2015/02/DigitalGlobe_WorldView2_50cm_8bit_Pansharpened_RGB_DRA_Rome_Italy_2009DEC10_8bits_sub_r_1.jpg',
'https://effigis.com/wp-content/uploads/2015/02/DigitalGlobe_WorldView1_50cm_8bit_BW_DRA_Bangkok_Thailand_2009JAN06_8bits_sub_r_1.jpg'];
var current = 0;
document.querySelector("button").onclick = function(e) {
document.querySelector(".container").innerHTML = "<img src='" + images[current] + "' alt=''/>";
current = (current + 1) % 2;
}.container,
img {
max-width: 100%;
height: auto;
}<button>Click</button>
<div class="container">
<img src="https://effigis.com/wp-content/uploads/2015/02/DigitalGlobe_WorldView1_50cm_8bit_BW_DRA_Bangkok_Thailand_2009JAN06_8bits_sub_r_1.jpg" alt="" />
</div>