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

Ответ 1

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

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

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

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

Ответ 2

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

Ответ: Да, но не поддержка в каком-либо браузере. Смотрите http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Ответ 3

Вы можете PRELOAD изображения только с помощью CSS, но фактически не задерживайте загрузку изображений только с помощью CSS.

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

Ответ 4

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

* img { display: none !important; }

Ответ 5

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

    .img{visibility:hidden;} 

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

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

    .show .img {visibility:visible;}

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