JQuery предварительно загружать изображения перед анимацией

Question

У меня есть <img> заполнитель, где я хочу показать изображения с использованием эффекта слайд-шоу:

<img rel="preload" class="home-postcard" src="/img/Rsquare1.jpg" />

Я запускаю этот сценарий JS:

var iloop = 0;
window.setInterval(function () {
    var dataArray = new Array("/img/Rsquare2.jpg", "/img/Rsquare3.jpg");
    $("img.home-postcard").fadeOut("fast", function () {
        $(this).attr("rel", "preload");
        $(this).attr("src", dataArray[iloop]);
        iloop++;
        if (iloop === dataArray.length) {
            iloop = 0;
        }
        $(this).fadeIn("slow");
    });
}, 10000);

Анимация работает,но изображения продолжают загружаться из сети на каждой итерации, и она потребляет пропускную способность.

Я пытался предварительно загружать изображения, используя rel="preload", но они продолжают загружаться каждый раз, когда src перезаписывается.

Что мне не хватает?

Примечание. Ранее я пытался использовать этот метод предварительной загрузки, но изображения продолжают загружаться при перезаписи атрибута src. Предварительная загрузка изображений с помощью jQuery

Примечание 2: rel="preload" упоминается как потенциальный метод: https://developers.google.com/web/updates/2016/03/link-rel-preload

Answer 1

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

Следующий простой пример иллюстрирует это.Я использую функцию setInterval для обновления элемента img двумя изображениями из массива каждые две секунды.Если вы откроете инструменты разработчика своего браузера и загляните в «сетевой раздел», вы заметите, что, хотя показ слайдов мог длиться минуту, все же есть только два http-запроса на изображения.

var images = ["https://picsum.photos/id/815/200/300", "https://picsum.photos/id/835/200/300"];
var counter = 0;

function update() {
  var img = document.getElementById("myImg").src = images[counter];
  if (counter + 1 < images.length) {
    counter++;
  } else {
    counter = 0;
  }
}
var interval = setInterval(update, 2000);

<img id="myImg">