Как правильно сделать lazy load?

Question

[ne_pes]

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

Answer 1

[Дмитрий Кузнецов]

ленивая загрузка тогда вам не подходит при работе с кликами. ленивую загрузку используют как правило для подгрузки изображений при видимости самого блока с изображением.

в вашем же случае достаточно будет data-src и src менять местами при клике.

Comments

[ne_pes]

Да, но это нормально, то что я буду оставлять атрибут src пустым или вообще его не использовать? При клике он будет заполняться/появляться

[Дмитрий Кузнецов]

ne_pes, не знаю нормально ли это с точки зрения стандартов HTML, но такую практику я видел много где. Как вариант, лучше используйте изображение-заглушку. Какое нибудь изображение одного цвета и маленького размера файла, что бы грузилась быстрее. И тогда валидаторы html не будут ругаться. А при клике меняйте изображение на то, что указано в data-src.