Можете ли вы помешать тегу <img>загружать изображение с помощью CSS?

Question

Есть ли способ остановить загрузку изображения тегом <img> с помощью CSS?Я хотел бы избежать использования JavaScript.

Это не похоже на работу (Firebug все еще показывает загрузку изображений):

display: none;
visibility: hidden;

Answer 1

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

Лучшее, что вы могли бы сделать с использованием CSS, это удалить тег <img> из вашего HTML, изамените его элементом, который показывает изображение через свойство CSS background-image.Тогда изображение контролируется больше в CSS, чем в HTML.

Я до сих пор не думаю, что вы можете гарантировать, когда изображение будет загружено - я помню, что ранние версии Safari загружали изображения, на которые есть ссылки втаблицы стилей, даже если они не использовались на текущей странице?Использование JavaScript (для создания тега <img>, когда требуется загрузить изображение), возможно, является наиболее надежным способом контроля времени загрузки изображений.

Однако взгляните на страницу, на которую ссылается from @ Ответ Stackle , чтобы увидеть поведение загрузки браузеров в апреле 2012 года с различными битами CSS, которые скрывают элементы с фоновыми изображениями.

Answer 2

Это старый вопрос, но сегодня мы можем сделать это, используя только CSS.

Ответ - Да, но не поддерживается в некоторых браузерах. Посмотреть это http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 3

Вы можете ПРЕОБРАЗОВАТЬ изображения с использованием только CSS , но фактически не задерживать загрузку изображений с использованием только CSS.

Это, однако, легко сделать, используя что-то вроде jQuery Lazy Loader , что НАМНОГО проще, чем пытаться сделать это вручную.

Answer 4

Затем вы устанавливаете их все на

    .img{visibility:hidden;} 

, это не позволит им сделать запрос http, но все равно сохраняет их размер и интервал в документе, предотвращая любые перерисовки.

тогда, когдаВы хотите показать свои скрытые изображения (например, те, которые видны), вы добавляете класс к окружающему html-элементу и в своем CSS говорите, что это

    .show .img {visibility:visible;}

Это должно сделать, Холмс.

Answer 5

Поместите это в конец таблицы стилей:

* img { display: none !important; }