<script src="https://unpkg.com/funlazy"></script>

<script src="https://cdn.jsdelivr.net/npm/funlazy"></script>

npm i funlazy -S
const FunLazy = require( "funlazy" );

<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">

<script>
    FunLazy();
</script>

FunLazy( {
    placeholder: "thumb.jpg",
    effect: "fadeIn"
} );

const opt = FunLazy( {
    placeholder: "thumb.jpg",
    effect: "fadeIn"
} );

// В соответствии с переданными пользовательскими настройками
// и настройками по умолчанию объединяем их и возвращаем результат объединения
console.log( opt );

<button>Добавить изображение</button>
<div id="img-box">
    <img data-funlazy="1.jpg" width="500" height="309">
    <img data-funlazy="2.jpg" width="500" height="309">
    <img data-funlazy="3.jpg" width="500" height="309">
</div>

<script>
    const opt = FunLazy( {
        autoCheckChange: true
    } );

    // Устанавливаем autoCheckChange: true,
    // новые изображения будут автоматически анализироваться для ленивой загрузки
    const target = document.getElementById( "img-box" );
    document.querySelector( "button" ).addEventListener( "click", () => {
        target.insertAdjacentHTML( "beforeend", '<img data-funlazy="new.jpg" width="500" height="309">' );
    } )
</script>

<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">

<script>

    // beforeLazy атрибут можно использовать для окончательной обработки URL-адреса изображения перед его ленивой загрузкой, что эквивалентно созданию слоя перехвата
    // Можно легко выполнить пакетную обработку URL-адреса перед загрузкой
    FunLazy( {
        beforeLazy: src => `${ src }?img-id=${ Math.random().toString( 36 ).slice( 2, 10 ) }`
    } );
</script>

<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">

<script>

    // useErrorImagePlaceholder атрибут можно использовать, чтобы показать заданное изображение в случае неудачной загрузки
    // - Установка значения true использует встроенное серое изображение в качестве заполнителя
    // - Передача URL-адреса позволяет настроить изображение-заполнитель
    FunLazy( {
        useErrorImagePlaceholder: true
        
        // Или:
        // useErrorImagePlaceholder: "img/error.jpg"
    } );
</script>