瀏覽器圖像下載行爲

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