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

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

background-image:url(http://localhost/images/btn3.gif);

Ответ 1

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

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

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


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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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