WordPress already adds loading="lazy" to images. Use IntersectionObserver for things the browser cannot lazy load by itself, like CSS background images.

HTML

<div class="lotgrafix-lazy" data-bg="https://example.com/image.jpg"></div>

main.js

document.addEventListener( 'DOMContentLoaded', function () {
    var items = document.querySelectorAll( '.lotgrafix-lazy' );

    var observer = new IntersectionObserver( function ( entries, obs ) {
        entries.forEach( function ( entry ) {
            if ( ! entry.isIntersecting ) {
                return;
            }
            entry.target.style.backgroundImage = 'url(' + entry.target.dataset.bg + ')';
            obs.unobserve( entry.target );
        } );
    }, { rootMargin: '200px' } );

    items.forEach( function ( item ) {
        observer.observe( item );
    } );
} );