Подскажите, пожалуйста, как правильно лениво загружать (желательно по скроллу) картинки, которые собираются через тег <picture>
?
Предположим для такой конструкции:
<picture class="bl_games__image">
<source media="(min-width: 2400px)" srcset="big_image.webp" type="image/webp">
<source media="(min-width: 2400px)" srcset="big_image.jpg">
<source media="(min-width:320px)" srcset="middle_image.jpg">
<img src="middle_image.jpg" alt="#">
</picture>
Я пробовал воспользоваться плагином jQuery & Zepto, но не пойму: как правильно добавлять data-*
атрибуты и на что цеплять класс .lazy
, чтобы это работало адекватно и для медиа-запросов.