Можете ли вы остановить тег <img> от загрузки его изображения с помощью CSS?
Можно ли остановить тег <img>
, загружая его изображение, просто используя CSS? Я бы хотел избежать использования JavaScript.
Это не работает (Firebug по-прежнему показывает загрузку изображений):
display: none;
visibility: hidden;
Ответы
Ответ 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;}
Это должно сделать это, Холмс.