css - 浏览器正在下载页面上已加载的背景图片？

Question

我正在使用 <button>带有背景图形的元素。我应用了 CSS 伪类 :hover它用不同的背景换掉背景。我正在页面其他地方预加载背景图片。

看看这个 JSFiddle 的精简演示:http://jsfiddle.net/WawV3/2/

在 Mac Chrome (32.0.1700.77) 和 Safari (7.0.1) 中，当您第一次将鼠标悬停在按钮上时，背景会闪烁，因为它(大概)正在下载新图形...即使是相同的悬停图像被加载到页面下方。 (它只会在第一次悬停时执行此操作；随后的悬停会立即加载。重新加载页面以查看它再次发生。)

什么给了？浏览器不必下载背景图片，因为它已经在页面上以普通 View 显示...对吧？

值得一提的是，在 Mac 和 Windows 或 IE 中的 Firefox 中，这似乎不是问题。

Answer 1

如果无法使用 sprite，您可以对背景图像进行编码以避免此问题。参见 fiddle ...

http://jsfiddle.net/WawV3/5/

button {
    height: 44px;
    width: 106px;
    background-image: url([data:image/png;base64,...]);
    background-repeat: no-repeat;
    border: none;
    outline: none;
}
button:hover {
    background-image: url([data:image/png;base64,...]);
    background-repeat: no-repeat;
}