仍然会下载并缓存带有style =“display：none”的图像吗？

Question

我正试图找出一种方法来缓存我的图库脚本中的下一个和上一个图像......我想知道这是否是一个很好的方法。另外，有没有办法手动指定下载图像的缓存时间？

Answer 1

display: none图片将下载并缓存在客户端上。但是，JavaScript已经有一种明确定义的预加载图像的方式：

  var nextImage = new Image();
  nextImage.src = "your-url/newImage.gif";

这将预加载图像而不将其显示给用户。

Answer 2

我不确定display: none的缓存行为（它可能因浏览器而异），但您可以通过在JavaScript中创建图像对象来将图像放入浏览器的缓存中而不显示它。在将图像添加到页面之前，图像不会显示。

var image = new Image();
image.src = 'example.com/image'

关于“有没有办法手动指定下载图像的缓存时间？”，有，但这是在HTTP响应中处理的，它将图像传递给浏览器。谷歌有一个很好的入门：https://developers.google.com/speed/articles/caching

Answer 3

我认为它会被下载，因此会被缓存，因为图像可能会在CSS到达之前加载。

如果浏览器过于聪明，position:absolute; left:-9999px; top:-9999px之类的东西应该是一个不错的选择。