weranda
@weranda

Как быть со скрытым изображением, чтобы оно было валидно?

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

Код этих картинок банален:
<img data-src="image.png" alt="some">
Так сделано по рекомендации из справки Яндекса, процитирую ее:
Картинки скачиваются по ссылкам из атрибута src тега img, а также атрибутов data-src и data-original (в этом случае наличие ссылки на изображение в атрибуте src не обязательно).


При проверке валидатором разметки, валидатор ругается, пишет, ошибка у вас:
Error: Element img is missing required attribute src.


Вариант с использованием loading="lazy" не подходит из-за того, что картинок много, слайдер листают не часто, грузить их все смысла нет.

Если прописать пустой атрибут src="", то валидатор будет ругаться, но уже на пустой атрибут изображения.

Вот как в таком случае быть, что делать, практики какие-то на эту ситуацию знаете?
  • Вопрос задан
  • 179 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега HTML
frontend developer
1. src не указывать. На валидатор забить.

2. вообще не выводить картинки, а генерировать их по необходимости. то есть прописать какой-нибудь <div data-src="image.jpg"></div> и внутри него скриптом вставлять картинку, когда нужно.

upd
3. использовать маленькую заглушку <img src="pixel.gif" data-src="image.jpg">
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы