Будет кэш браузера фоновое изображение CSS, если он не будет использоваться?
Когда у Вас есть два правила как это:
.foo {
background-image: url(foo.gif);
}
.foo {
background-image: url(bar.gif);
}
и имейте <div class='foo'>Foobar</div>
Будет Ваш кэш браузера оба или просто тот, на самом деле отображаемый (bar.gif в этом случае)?
Действительно ли это верно во всех установках? (правила, находящиеся в различных файлах, !important будучи примененным к одному, и т.д.)
5 ответов
Я предполагаю, что под "кэшированием" здесь вы подразумеваете "предварительную загрузку". На самом деле "кэширование" связано с заголовками expires и тому подобными.
Это полностью основано на поведении браузера и на том, что он решает делать. Однако, по моему опыту, современные браузеры не утруждают себя загрузкой изображения, определенного в CSS-файле, если только изображение не вызывается на самом деле.
Это одна из причин, по которой некоторые предпочитают сделать и состояние по умолчанию, и состояние наведения элемента одним изображением, а затем использовать свойство background-position для изменения видимости. Это немного больше накладных расходов, но также отсутствует задержка между наведением и отображением состояния наведения, что делает работу более плавной.
Браузер не загружает изображения, когда читает css, он просто держит их в памяти. И когда он начинает рендеринг страницы, он начинает загружать изображения.
Так что в вашем случае вы уже переопределили свое правило css, и когда браузер рендерит страницу, он игнорирует ваше правило css и, естественно, не загружает ваше первое изображение.
Насколько я могу судить, лучшее (с FireBug), он вытягивает только отображаемые вами изображения, а не определенные.
Используя tail -f в локальном журнале apache, я обнаружил следующее:
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.html HTTP/1.1" 200 127
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.css HTTP/1.1" 304 -
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /bar.gif HTTP/1.1" 404 205
Используя firefox, браузер пытался загрузить только "bar.gif" (который был 404 не найден, потому что у меня не было этого изображения).
Если вас интересуют другие браузеры, я могу протестировать и их.
, если оба правила имеют одинаковую специфичность, тогда будут применяться позже. подробнее о специфичности читайте здесь.