Question

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

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

问题：当光标第一次进入灯箱时，它应该加载“大”图像，并且所有浏览器都将图像保存在缓存中，所以当光标熄灭时，第二次出现“大”图像时已下载，所以不需要分秒或1秒下载。

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

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

提前致谢，并原谅我的英语水平。

Answer 1

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

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/vendedores/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。如果您控制服务器，则由您自己决定如何通过浏览器缓存图像。

Answer 2

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

<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="" />

没有在Google Chrome中缓存动态加载的图片

2 个答案: