1

当用户将鼠标悬停在屏幕的特定区域时，我创建一个 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 进行了检查，并且确实每次都获取了图像。

有什么办法可以防止这种情况发生吗？

4

3 回答 3

3

您可以尝试使用 css 设置背景，并且只更改代码中的 className。这个 jsfiddle展示了这样做的想法。在 Chrome 开发人员工具的网络选项卡中，您会看到初始加载后的图像随后从缓存中加载。

代码变得如此简单：div.className = yellowBG ? 'yellowBG' : '';

在这个 jsfiddle中，图像是预加载的。

于 2012-08-17T08:17:13.593 回答
0

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

Cache-control: public; max-age=31536000

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

此外，请务必注意，此标头将禁止您更新上述图像。

于 2012-08-14T17:16:58.377 回答
0

见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并且其背景将同时出现。

于 2012-08-14T15:59:47.130 回答