Question

我有一个应用程序，它在多个位置显示相同的图像，可能会更改图像的src。

当我指向我之前已经使用的PNG图像时，浏览器不会打扰发出新请求，它只是使用已经在缓存中的PNG图像。但是，当我指向我之前使用的SVG图像图像时，浏览器（Chrome 22）会发出新请求。服务器返回304（未修改），因此不需要下载新图像，但这仍需要一些额外的处理。

这可以在这个jsFiddle中轻松测试：http://jsfiddle.net/jtmuw/1/

$('button').click( function() {
  $('#a').attr('src', "myImage.svg");

  $('#b').attr('src', "myImage.png");
});

如果您打开Chrome（或至少Chrome v.22.0.1229.94）的小提琴并打开网络标签，您将看到已请求两张图片。如果您再多次点击“重新加载图片”，您的网络标签将显示多个SVG图像请求，但不再请求PNG图像。

据我所知，服务器返回相同的标题，所以我看不出任何差异的原因。

我在FF或Safari上没有看到这个，所以这可能是Chrome问题。但是，我仍然觉得可能在我缺少的标题中存在一些潜在的差异，并且Chrome不仅仅是奇怪地处理SVG图像。

Answer 1

您可以强制Chrome缓存该文件。 w3schools对此有如下概述：http://www.w3schools.com/html/html5_app_cache.asp

基本上你要创建一个清单文件（称之为“myCache.appcache”或其他任何东西）

CACHE MANIFEST
/path/to/svg/file.svg

然后在你的html文件中指向这个：

<html manifest="myCache.appcache">

这将告诉Chrome，即使您没有互联网访问权限，此文件仍应缓存并可访问。

Answer 2

在文档顶部包含SVG图像。

<html>
<head>
    ...
</head>
<body>
    <img style="display:none" src="cached.svg">
    ....
</body>
<html>