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

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 附加到正文并给出 @987654321 @ 为了不显示会强制 img 在需要之前加载。