У меня есть класс, определенный в моем styles.css как:Загрузка фонового изображения CSS всегда?
.caquote {background: url("http://cdn.domain.com/images/quotebig.png") no-repeat 10px 8px ;}
Будет ли изображение будет загружен современными браузерами, если на странице HTML я не определяю .caquote где-нибудь?
Изображения КАС являются загрузки, только если они используются в HTML: Я сделал пример для вас в jsfiddle: http://jsfiddle.net/b3QXu/ Как вы можете видеть, второе изображение нагрузки только при наведении DIV , Если вы не наведете div, изображение не будет загружено вашим компьютером.
#bonjour {
background-image : url(http://rosalienebacchus.files.wordpress.com/2012/04/planet-earth-from-space.jpg);
width : 500px;
height : 500px;
background-color : #123456;
background-size : cover;
}
#bonjour:hover {
background-image : url(http://www.desktopas.com/files/2013/06/Outer-Space-Moon- Earth-Spaceman.jpg);
}
Для вашей информации: Все изображения в файле HTML загружаются, даже если они установлены как отображение: none на css.
Дамьен в вашем ответе говорит об обратном @ceqfault - кто прав? –
Я уверен в своем ответе :) Вы попробовали мой jsfiddle? Вы ясно видите, что второе изображение не загружается, пока вы не наведете div. Даже если это изображение объявлено в css. важно: очистить кеш до повторного тестирования! – Damien
Это правильный ответ для современных браузеров (IE7 и новее). [На это был дан ответ до] (http://stackoverflow.com/questions/2396909/are-unused-css-images-downloaded). – amenadiel
Я не вижу двух ответов как противоречащих друг другу. Damien говорит, что свойство background-image, загружающее изображение, вызывается только тогда, когда оно используется. В примере с наворотом изображение не было необходимо до событие hover.
cegfault сообщает, что изображения загружаются даже на дисплее: нет. Он также говорит, что страница может отображаться (при подсчете и отображении достаточного количества элементов) и , затем [после того, как она скачена параллельно] появится фоновое изображение. Это не означает, что изображение bg было заблокировано. Просто это было настолько большим, что потребовалось некоторое время для загрузки.
Что такое говядина? – user2209531
Это должно быть легко проверить, сделав страницу, включающую 'styles.css', но не тот конкретный класс. Загрузите эту страницу в свой браузер и посмотрите сетевой трафик (используя «Инструменты разработчика» в Chrome или «Веб-консоль» в Firefox. – Jud
Возможный дубликат [Неиспользуемые изображения CSS загружены?] (Http://stackoverflow.com/questions/ 2396909/are-unused-css-images-скачано) – amenadiel