Как использовать LazyLoad для picture source?

Question

[naflove]

У меня есть стандартный скрипт LazyLoad.

jQuery(document).ready(function($) {
    const hs = $(window).innerHeight() // 720

    function lazyShowImages() {
        const sp = $(window).scrollTop() + hs
        $('img.lazy').each(function(i, e) {
            if (sp > $(e).offset().top) {
                $(e).attr('src', $(e).data('src'))
                $(e).removeClass('lazy')
            }
        })
    }

    lazyShowImages()
    $(document).scroll(lazyShowImages)
})

Но он будет работать только для обычного вывода картинок:

<img class="lazy" src"load.gif" data-src="img/image.png" alt="">

А как сделать если используется webp/avif?:

<picture>
    <source srcset="img/image.webp" type="image/webp">
    <source srcset="img/image.avif" type="image/avif">
    <img src="img/image.png" alt="">
</picture>

Comments

[Ivan1331]

Так а в чем сложность, в самом формате, или в теге picture? А вообще стандартное loading="lazy" уже давно поддерживается браузерами