CSS背景图像总是加载？答案

【问题标题】：CSS Background Image loading always?CSS背景图像总是加载？
【发布时间】：2014-05-20 23:42:51
【问题描述】：

我在我的 styles.css 中定义了一个类：

.caquote {background: url("http://cdn.domain.com/images/quotebig.png") no-repeat 10px 8px ;}

如果在 html 页面上我没有在任何地方定义.caquote，现代浏览器还会加载图像吗？

【问题讨论】：

这应该很容易通过制作包含styles.css 但不包含特定类的页面来检查。将该页面加载到浏览器中并观察网络流量（使用 Chrome 中的“开发者工具”或 Firefox 中的“Web 控制台”。
Are unused CSS images downloaded?的可能重复

标签： css

【解决方案1】：

只有在 HTML 中使用 css 的图像才能下载：我在 jsfiddle 中为你做了一个例子：http://jsfiddle.net/b3QXu/ 如您所见，第二张图片仅在您悬停 div 时加载。如果您不悬停 div，则您的计算机不会下载该图像。

#bonjour {
background-image : url(http://rosalienebacchus.files.wordpress.com/2012/04/planet-earth-from-space.jpg);
width : 500px;
height : 500px;
background-color : #123456;
background-size : cover;
}

#bonjour:hover {
    background-image : url(http://www.desktopas.com/files/2013/06/Outer-Space-Moon-    Earth-Spaceman.jpg);
}

供您参考：HTML 文件上的所有图像都已加载，即使它们在 css 上设置为 display:none。

【讨论】：

Damien 你的回答与@ceqfault 正好相反——谁是正确的？
我确定我的答案 :) 你试过我的 jsfiddle 吗？您可以清楚地看到，直到您将鼠标悬停在 div 上才会加载第二张图像。即使这个图像是在 css 中声明的。重要：在重新测试之前清除缓存！
这是现代浏览器（IE7 和更新版本）的正确答案。 It has been answered before.

【解决方案2】：

我认为这两个答案并不矛盾。 Damien 说加载图像的 background-image 属性只有在使用时才会被调用。在他的悬停示例中，直到悬停事件才需要图像。

cegfault 表示即使在 display:none 中也会加载图像。他还说页面可以显示（因为计算和渲染了足够多的元素），然后然后 [一旦并行下载] 背景图像就会出现。这并不意味着 bg 图像被阻止。只是它太大了，需要一段时间才能下载。

【讨论】：