如何使用 javascript 缓存背景图像？答案

【问题标题】：How can I cache background images using javascript?如何使用 javascript 缓存背景图像？
【发布时间】：2019-12-17 23:33:45
【问题描述】：

更改背景图片时，即使使用 apache mod_expires 模块，这些图片也不会缓存。

更改 apache 的 mod_expires 模块，循环遍历单独 div 中的所有图像，该 div 隐藏在 z-index 后面 1x1px 的某处。

这是我设法缓存图像的方法，并且在关闭浏览器窗口之前它们不会重新加载。它循环遍历所有图像，创建一个存储在缓存数组中的 HTML 图像节点。 Javascript 的垃圾收集器不会在图像循环后从缓存中删除它们。

const images = ["/img/1.jpg","/img/2.jpg","/img/1.jpg"];
const cache = Array();
for(const path of images){
  const img = document.createElement("IMG");
  img.src = path;
  cache.push(img);
}

是否可以将图像永久缓存在浏览器的缓存中？

【问题讨论】：

也许您可以为此使用 cookie。你也可以使用一些 .htaccess 技巧。

标签： javascript css image caching

【解决方案1】：

您应该检查服务器是否正确设置了所有 HTTP 标头。在 Firefox 和 Chromium 中，您可以通过按 F12 然后切换到网络选项卡来执行此操作。

但据我所知，缓存标头只是说明文件 是否可以 被缓存。最后，是否要缓存文件取决于浏览器。如果浏览器不想缓存文件，我个人不会尝试找到解决方法。

但一种解决方法是将图像保存在 localStorage javascript 对象中。在我的系统上，localStorage 限制为每个网页 5MB。

【讨论】：

我已经尝试了缓存控制元标记<meta http-equiv="Cache-control" content="public">，并且我还使用了图像节点（不是背景图像）并且缓存不起作用。