浏览器正在下载页面上已经加载的背景图像？答案

【问题标题】：Browser downloading a background image that's already loaded on the page?浏览器正在下载页面上已经加载的背景图像？
【发布时间】：2014-02-10 10:20:52
【问题描述】：

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

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

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

什么给了？浏览器不应该下载背景图片，因为它已经在页面上的普通视图中......对吗？

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

【问题讨论】：

我还没有找到对此行为的解释，但流行的解决方法似乎是使用精灵。
@j08691 是的...不涉及太多不必要的细节，我们只是说在这种情况下精灵不是一个选项。
当您将鼠标悬停在按钮上时，图像会闪烁，因为直到您第一次将鼠标悬停在按钮上时才会从服务器加载悬停 background-image 资产。您会注意到，如果您再次将鼠标悬停在按钮上，图像不会闪烁。
@Andrew 谢谢。但是您会注意到背景图像已经从服务器拉到页面并显示在<img> 标记中。是否应该将它放在浏览器的缓存中，这样它就不必再次从服务器检索它？
如果您从标记中删除“预加载”img，您将获得相同的 flash 结果（实际上，您可以在悬停时看到它出现在资源中）。我在这里的技术深度有点不足，但我想知道 DOM 中显示的资产是否与 CSS 调用的资产有所不同？

标签： css button background hover preloader

【解决方案1】：

如果无法使用精灵，您可以对背景图像进行编码以避免此问题。见小提琴...

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;
}

【讨论】：

有趣。似乎是一个不错的选择。两个问题： 1. 这种方法有什么缺点？ 2. 你是如何对图像进行编码的？
这种方法的唯一缺点是文件大小比完全优化的 sprite 略有增加，尽管这可以通过减少对服务器的调用来抵消。为了对图像进行编码，我使用了一个名为 Base64 Image Encoder 的 Mac 应用程序，但还有许多其他应用程序以及一些可用的在线解决方案。