Question

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

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

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

Answer 1

只有在HTML中使用css的图像才会下载：我在jsfiddle中为你做了一个例子：http://jsfiddle.net/b3QXu/ 如您所见，第二个图像仅在您将鼠标悬停时加载。如果您没有悬停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也是如此。

Answer 2

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

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

CSS背景图像加载总是？

2 个答案: