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属性，图像都会继续下载。 Preloading images with 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">