КАЖДЫЙ образ в файле CSS загружается при загрузке файла?

Скажем, у меня есть все мои сайты CSS в 1 файле css, поэтому он довольно большой, я хочу знать, использует ли страница 3 класса с чем-то вроде этого, запрашивающим 3 изображения с сервера, скажем, есть что-то вроде 50 из них во всем css файле, все ли вызываются/запрашиваются с сервера или только 3, которые нужны странице?

background-image:url(http://localhost/images/btn3.gif);
6 ответов

Есть один простой способ узнать (нормально, не проще, чем просто переполнение стека). Поместите это в файл CSS:

#nonExistantElement {
 background-image: url(myScript.php);
}

и сделайте, чтобы script записывал хит, записывая файл или что-то в этом роде.

Хорошо, я только что сделал это сам сейчас. Оказывается: нет, он не получает файл. (Протестировано на Firefox 3.5.2, IE7, Chrome 2.0)


Я так не думаю. Изображения, необходимые для псевдо-класса hover (mouseover), загружаются, когда вы наводите курсор, и может быть заметное отставание от первого появления (если вы не используете чит для его предварительной загрузки).


Браузер загрузит то, что ему нужно, чтобы отобразить страницу. Хотя я могу себе представить, что различные браузеры могут использовать определенные методы кеширования и предварять все, что они видят в файле CSS.


Ваш ответ лежит на firebug


Нет, запрос на изображение выполняется только тогда, когда класс или id присутствует на странице.


Если вам нужно, чтобы изображение, которое не было видно на странице, загружалось в "предварительную загрузку", есть множество трюков, которые вы можете использовать, например, отображение изображения с экрана при загрузке. Наиболее распространенным случаем, когда "предварительная загрузка" является необходимым, является случай фоновых изображений, которые изменяются при наведении, где в противном случае было бы неприемлемое отставание при первом повороте пользователя и изменении образа. Наиболее распространенное решение этой проблемы называется "CSS Sprites". Вы совмещаете активные изображения по умолчанию, зависания и (если есть) в один файл, один над другим, и вы просто меняете смещение фонового изображения на: hover и: active.

licensed under cc by-sa 3.0 with attribution.