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

我目前正试图为我创建的网页预先加载图片，因为这些图片相当大。可以通过页面切换缓存预加载的图像吗？

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

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

所以我的问题是：有没有可能缓存这些图像？（还是最好把它们放到一个会话变量中？）

图像本身是相当大的，可以占用每个1.5MB（总共有20个图像在目前已经存在的部分，预载大约需要4秒）。

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

编辑：正如我忘了提到它：万维网服务器，我将最终存储在网站上是一个外部（托管服务提供商），所以我将无法编辑webserversettings自己有

来源

2014-02-28 Thomas

如果您使用的是Apache，可以使用'mod_expires'设置缓存时间。这里有一个供参考的链接：http://stackoverflow.com/questions/447014/website-image-caching-with-apache – Kyle

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

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

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的组合来实现自己的图像缓存，但是如果存在任何真实世界的情况，我会感到惊讶是必需的，如果您有大量的图像，您可能会在本地存储上存储限制比对浏览器缓存大小的限制更快。

来源

2014-02-28 21:38:44 jfriend00

我已经在第一页上预加载了它们。有没有办法确保浏览器缓存图像，还是控制它们是否被缓存？ – Thomas

您无法强制浏览器缓存它们，尽管任何普通浏览器都会缓存它们，因为这是提高浏览器性能的主要原因。你的服务器可能会发出阻止它们被缓存的头文件，所以你显然应该确保它没有这样做。你是否有一个特定的实现问题，其中的图像没有从一个页面缓存到下一个，或者你现在正在对事物进行理论化。 – jfriend00

我曾经有过这样的问题，即每个页面都需要很长时间才能加载所有图像（预加载），但不确定是因为每个图像的数量和大小，还是因为它们没有被缓存。因此你的回答很可能是导致问题的图像的大小和数量。 tnx。 – Thomas

如果图像不改，尝试在.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) 
    }); 
})()

来源

2014-02-28 21:43:45

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

回答

相关问题