Андрей Мотошин Front-end engineer

data-src

#javascript, #jQuery

Давно у меня появилась эта мысль, но все никак не мог ее записать.

Так вот, эта идея о ленивой загрузке изображений с помощью кастомного атрибута data-src. В него можно записывать URL картинки, а потом, когда заблагорассудится переместить его в настоящий атрибут src.

Еще можно перед этим загрузить картинку с помощью jquery.preload, а потом уже менять атрибут.

Не понимаете зачем это нужно, ведь есть display: none и visibility: hidden? Даже при использовании этих свойств, браузеры загружают изображение из сети. А с помощью data-src-метода можно управлять процессом загрузки страницы и оптимизировать ее.

Пример кода:

<img data-src="path/to/image.jpg" src="" alt="" />