仍然会下载和缓存带有 style="display: none" 的图像吗？答案

【问题标题】：Will an image with style="display: none" still be downloaded and cached?仍然会下载和缓存带有 style="display: none" 的图像吗？
【发布时间】：2011-01-11 06:15:32
【问题描述】：

我正在想办法在我的图库脚本中缓存下一张和上一张图片……我想知道这是否是一个好方法。另外，有没有办法手动指定下载图片的缓存时间？

【问题讨论】：

这可以通过 JavaScript 实现，但我实际上更喜欢这个解决方案（如果可行的话）。

标签： javascript html css caching

【解决方案1】：

display: none 图像将被下载并缓存在客户端上。然而，JavaScript 已经有一个定义良好的预加载图像的方式：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

不能说我是他的黑客的粉丝。
这是一个 hack 好吧。幸运的是，这似乎是不必要的。但是，不再需要 CSS hack 的那一天确实是快乐的一天……