在谷歌浏览器中没有缓存动态加载的图像答案

【问题标题】：No caching of dynamically loaded images in Google Chrome在谷歌浏览器中没有缓存动态加载的图像
【发布时间】：2013-03-05 00:03:02
【问题描述】：

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

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

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

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

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

先谢谢了，请原谅我的英语水平。

【问题讨论】：

见过比你写的更“残酷”的帖子。 :-)

标签： jquery image caching

【解决方案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，这可能是相关的，因为在没有其他线索的情况下，浏览器的缓存策略可能与内容类型有关。

你自己是从服务器发回图片的时候的网址：

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

...被击中？即服务器是否也结束了您的代码？如果是这样，请尝试添加适当的Cache-Control 标头和Content-Type。如果您控制服务器，那么浏览器如何缓存您的图像几乎取决于您。

【讨论】：

没有标题的图像是动态 php 生成的，带有一个名为“PHP Wide image”的扩展名。第二张图片（带有标题）也是使用 PHP 宽图片生成的，但之前存储为 jpg（添加产品时），我猜在第二张图片中，服务器配置 Etags 会影响它，但不会影响第一个。无论如何，非常感谢您提供的信息。我正在修复它，我会告诉你的。
[已解决] 这真的很快：使用 WideImage 中的类 ->writeHeader 并添加一些标题效果很好。只需要从 WideImage PHP 扩展中编辑 Image.php，因为这个类是“受保护”的，如下所示：受保护的函数 writeHeader($name, $data) 我刚刚删除了“受保护”，不知道为什么这样声明..问题已解决。再次感谢。

【解决方案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="" />

【讨论】：