5

使用 jQuery 加载的图像未保存在 Google Chrome 的缓存中？它每次都从服务器下载。

情况：我正在使用 jQuery slimbox2 在“灯箱”中加载图片。在这一点上没有什么特别的。我添加了一些 jQuery 代码来检测鼠标光标何时越过灯箱图像：当这种情况发生时，我动态加载灯箱图片的一个版本，但通过更改 div 的 css 背景更大（如缩放）。

问题：当光标第一次进入灯箱时，它应该加载“大”图像，并且对于所有浏览器，图像都保存在缓存中，所以当光标第二次消失时，“大” ' 图像已经下载，所以下载不需要那一秒或 1 秒。

使用 Chrome，它会一次又一次地下载。（还有更多的问题，因为灯箱分页层的 mousein mouseout 事件使这个额外的下载 = 图像一直闪烁 [图像下载]）。

示例：我的英语很粗野，而且已经很晚了。只需检查示例即可了解:) http://motocross.es/f/oneal/casco-oneal-7-series-mayhem-roots/996

在此先感谢，并原谅我的英语水平。

4

2 回答 2

3

我相信这是因为与您的图像一起发送的标头没有说明它的缓存。我的意思是您的图片网址：

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

...使用这些标题提供图像：

  HTTP/1.1 200 OK
  Date: Sat, 16 Mar 2013 10:00:13 GMT
  Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6
  Content-Length: 79741
  Keep-Alive: timeout=3, max=1000
  Connection: Keep-Alive
  Content-Type:

这没有说明应该如何缓存图像。例如，将其与主页上的基本较小图像进行比较：

http://motocross.es/upload/shop/vendores/44/productos/standard/cropped_ref_44_1szyh6a9s5mh3ixc.jpg

...标题如下所示：

  HTTP/1.1 200 OK
  Date: Sat, 16 Mar 2013 10:00:42 GMT
  Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6
  Last-Modified: Fri, 08 Mar 2013 03:04:33 GMT
  ETag: "2726d07-d1c9-4d761151f1240"
  Accept-Ranges: bytes
  Content-Length: 53705
  Cache-Control: max-age=1296000, public, must-revalidate
  Keep-Alive: timeout=3, max=1000
  Connection: Keep-Alive
  Content-Type: image/jpeg

看到额外的缓存说明了吗？那里有一个Cache-Control标头，这可能是重要的部分，以及其他缓存信息，如 ETag。还有一个Content-Type，可能是相关的，因为在没有其他线索的情况下，浏览器的缓存策略可能与内容类型有关。

当 URL：

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

……被击中？即服务器端也是你的代码吗？如果是这样，请尝试添加适当的Cache-Control标题和Content-Type. 如果您控制服务器，则很大程度上取决于您的图像如何被浏览器缓存。

于 2013-03-16T10:06:41.547 回答
0

尝试将它们存储到本地商店ibm.com localstorage 示例

<script>
    var hero;
    if ( localStorage.getItem('heroImg')) {
        hero = localStorage.getItem('heroImg');
    }else {
        hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7    /.../    6p+3dIR//9k=';
        localStorage.setItem('heroImg',hero);
    }

    document.getElementById("hero-graphic").src='data:image/png;base64,' + hero;
</script>

<img id="hero-graphic" alt="Blog Hero Image" src="" />
于 2013-03-16T09:58:12.337 回答