浏览器图像下载行为

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