如何在需要显示之前下载幻灯片图像？

Question

我在网页上有一个元素，背景图像应用于它。有六个不同的图像，我逐个显示它们。目前，第一个图像显示四秒钟，然后下一个图像显示四秒钟，依此类推。

我面临的问题是我无法控制图像的下载顺序。当浏览器显示第一张图像时，我希望它能够优先下载幻灯片中的第二张图像。当浏览器显示第二个图像时，我希望它优先下载第三个图像。这样，当图像改变时，用户将不会看到闪光。

目前，浏览器似乎是以随机顺序下载图像。这是我的CSS：

@keyframes slideshow {
  0% {
    background: url('1.jpg');
  }
  4% {
    background: url('1.jpg');
  }
  6% {
    background: url('2.jpg');
  }
  14% {
    background: url('2.jpg');
  }
  .... and so on.
}

当我在后台播放1.jpg时，有没有办法强制浏览器下载图像2.jpg？

感谢。

Answer 1

也许你可以使用一个显示的无img标签并加载你想要的元素...我想到的是每次更改时在滑块上添加onchange事件你将下一个img附加到body并给出{{ 1}}为了不显示强制img在需要之前加载。