可以通过页面切换缓存预加载的图像？

Question

我目前正在尝试为我正在创建的网页预加载图像，因为这些图像非常大。

目前我知道（感谢此处的另一篇文章）如何通过预加载图像（通过 javascript 预加载然后在画布中显示它们）来处理图像本身。

但是每当我切换页面时，预加载的图像都需要再次预加载，因此它们不会被缓存。

所以我的问题是：是否有可能缓存这些图像？ （或者最好将它们放入会话变量中？）

图片本身相当大，每张可能占用 1.5MB（仅当前已经存在的部分总共有 20 张图片，预加载大约需要 4 秒）。

如有必要，作为信息： 我使用 apache 服务器和 php 作为主要语言，支持 javascript。

编辑： 正如我忘记提及的那样：我最终将存储网站的网络服务器是外部服务器（托管服务提供商），因此我将无法在那里自己编辑网络服务器设置

Answer 1

如果图像没有改变，请在 .htaccess 中尝试这样的操作：

#Set caching on image files for 11 months
<filesMatch "\.(ico|gif|jpg|png)$">
  ExpiresActive On
  ExpiresDefault "access plus 11 month"
  Header append Cache-Control "public"
</filesMatch>

如果您认为这不是正确的方法，例如图像可能会发生变化，只需在页面点击时立即加载图像（警告，绝对是 hack）：

(function(){
  var hiddenCache = document.createElement("div");
  hiddenCache.style.display = "none";
  document.body.appendChild(hiddenCache);
  // or for loop if ECMA 3
  myEagerLoadedImageUrls.forEach(function(urlStr){
    var hiddenImg = document.createElement("img");
    hiddenImg.src = urlStr;
    hiddenCache.appendChild(hiddenImg)
  });
})()

Answer 2

只要来自服务器的标头没有告诉它避免缓存，浏览器就已经将图像缓存在其内存和/或磁盘缓存中。浏览器缓存在页面加载时持续存在。因此，如果您的图像已在第一页上加载一次，它们应该已经在第二页的浏览器缓存中，因此当在第二页上请求时，它们应该在本地加载，而不必通过 Internet 获取。

如果您正在寻找可用于预加载图像的客户端代码，有很多示例：

How do you cache an image in Javascript

Image preloader javascript that supports events

Is there a way to load images to user's cache asynchronously?

仅供参考，在较新的浏览器中可以使用本地存储和数据 URI 的组合来实现您自己的图像缓存，但如果有任何实际情况需要这样做并且如果您有很多图像，您可能会比浏览器缓存大小的限制更快地遇到本地存储的存储限制。