Можно ли какими-то css правилами заблокировать загрузку изображения?

Question

[frontendo]

есть обычный
<img src="..." ... />
эта разметка генерится на бэке и наличие src вроде как важно для сео в плане индексации изображения, поэтому варианты типа
<img data-src="..." ... />
с последующим применением скрипта, подставляющего в src значение из data-src не подходит

подходит недавно введенное хромом
<img src="..." loading="lazy" />
но его применение ограничено лишь последними версиями этого браузера

Идеально было бы, если бы некое css-правило, типа display="none" блокировало не показ, а именно загрузку (чтобы не тратился трафик у пользователя), пока не поменяется на display="!none"

Answer 1

[Александр]

<img src="..." class="hidden-img" ... />
<style>.hidden-img{display:none}<style/>

Потом на js убираем у нужной картинки класс hidden-img

Comments

[frontendo]

нужно не скрытие, а блокирование загрузки. В сетевых подключениях видно, что картинка все равно загружается

[Александр]

frontendo, Если изображения не будут загружаться, они и индексироваться не будут поисковиками

Answer 2

[Шохрух Шаймардонов]

Почитайте эту статью на хабре. Полагаю вы в тех же целях задали вопрос

Answer 3

[Artem Ivanov]

держите https://github.com/verlok/lazyload