浏览器图像下载行为

Question

在我在这里看到的一个问题中，有人问如何在页面刷新时更改背景，而不使用任何服务器端技术。一个答案是使这个css

.backgr0 { background-image: url('images/somepic.jpg'); } 
.backgr1 { background-image: url('images/somepic.jpg'); } 
.backgr2 { background-image: url('images/somepic.jpg'); } 
.backgr3 { background-image: url('images/somepic.jpg'); } 
.backgr4 { background-image: url('images/somepic.jpg'); } 

然后有一个随机类添加到元素。

但我想知道的是，当浏览器遇到这个CSS，它会继续并下载所有这些图像？因为在那种情况下，你真的提高了HTTP请求的数量。

Answer 1

与往常一样，知道肯定的最好方法是测试一下。

你会发现浏览器只会在CSS匹配时才加载文件。 （至少这是Firefox，Chrome和IE的行为方式）

E.g.如果你有这个，但没有id="foo"元素，浏览器将不会加载它。

#foo{ 
    background-image:url('some.png'); 
}