7

我有一个应用程序在多个位置显示相同的图像，并且可能会更改图像的 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");
});

​</p>

如果您使用 Chrome（或至少 Chrome v.22.0.1229.94）打开小提琴并打开您的网络选项卡，您将看到两个图像已被请求。如果您随后多次点击“重新加载图像”，您的网络选项卡将显示对 SVG 图像的多个请求，但不会显示对 PNG 图像的进一步请求。

据我所知，服务器正在返回相同的标头，因此我看不出有任何差异的原因。

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

4

2 回答 2

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，即使您无法访问互联网，该文件也应该被缓存并可以访问。

于 2013-03-14T19:24:31.200 回答
1

在文档顶部包含 SVG 图像。

<html>
<head>
    ...
</head>
<body>
    <img style="display:none" src="cached.svg">
    ....
</body>
<html>
于 2015-09-30T12:35:56.433 回答