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>

如果您认为这不是正确的方法，就像图片可能会发生变化一样，只需在页面点击时加注图片（警告，绝对是黑客）：

(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

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

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

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的组合来实现您自己的图像缓存，但如果有任何真实情况需要，并且如果您有很多图像，您可能会比本地存储的存储限制更快地限制浏览器缓存的大小。

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

2 个答案: