поведение загрузки изображений из браузера

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)

Например, если у вас есть этот элемент, но нет элемента id="foo", браузер его не загрузит.

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