Question

当用户将鼠标悬停在屏幕的特定区域上时，我会创建一个div，然后设置背景：

div= document.createElement('div');

if (yellowBg) {
    div.style.backgroundImage = 'url(\'../partHoverBgYellow.png\')';
}
else {
    div.style.backgroundImage = 'url(\'../partHoverBg.png\')';
}

parent.appendChild(div)

在Firefox和IE中，背景图像在第一次获取后会被缓存。

但是在chrome中，它似乎没有被缓存。结果是div在每次设置背景之前出现。

我已经使用Fiddler进行了检查，并且每次都会获取图像。

有没有办法阻止这种情况发生？

Answer 1

请参阅http://jsfiddle.net/X8SkS/3/

如果你这样做

var img=document.createElement('img');
var urls=["../partHoverBgYellow.png","../partHoverBg.png"];
img.src=urls[0];
img.src=urls[1];

加载文档时，浏览器会下载图像，所以当你这样做时

div.style.display = 'block';

Chrome会在缓存中显示图片，而div及其背景会同时显示。

Answer 2

如果您可以控制从服务器发送的标头，请包含以下内容：

Cache-control: public; max-age=31536000

因此，您的图像在客户端缓存了一年。这是每个浏览器必须实现的方式和语义。有关进一步说明，请参阅the W3C documentation。

另外，请务必注意，此标题会禁用您更新上述图像。

如何强制Chrome停止提取相同的图片？

2 个答案: