Поведение загрузки фоновых изображений CSS

Question

Скажем, есть объявление стиля css для элемента, который был установлен display:none (не отображается на экране), а также для него установлено фоновое изображение.

Допустим, этот элемент отображается при событии, например при щелчке мыши. Будет ли браузер загружать эти изображения еще до отображения элемента? Является ли такое поведение загрузки одинаковым для всех браузеров?

Answer 1

По этой теме не так много хорошей информации, поэтому я провел несколько тестов на webpagetest.org, используя тестовую страницу Стива Соудерса .

Оказывается, что из всех протестированных браузеров только Firefox не загружает фоновое изображение с дисплеем: нет . Вы можете посмотреть результаты теста в моем блоге здесь .

Answer 2

Нет, браузеры, которые я тестировал раньше, нет.

, если вы хотите загрузить изображение, попробуйте использовать background-position: -1000px -1000px, который работает. Изображение не будет отображаться, но оно будет предварительно загружено. Тем не менее, элемент будет в нормальном потоке, то есть не скрыт.

Answer 3

Он не загружается автоматически, но вы можете использовать трюк Javascript для предварительной загрузки изображения.

pic = new Image(); 
pic.src="http://url/imagetoload.png"; 

В качестве лучшего решения вы можете создать div с отрицательным значением позиционирования (например, left: -1000px) и назначить imagetoload.png его фону для загрузки изображения.