Lazy Loading Images With Vanilla Javascript

I am working on a custom lazy load script with vanilla javascript that I would like to utilize throughout a site I am building. At several points during it’s construction I feel like I have had it successfully completed, but when I start trying to break my code for testing, it really breaks.
Currently I am at the point where I had a basic Vanilla Javascript working model doing what I needed it do Codepen Link

I began customizing it to search for a parent element by a data attribute (data-lazy-mask) then running a for each loop to gather all of those elements then located the img tag inside of it & then load it. Then when the user scrolls the page and the parent containing element is in view on the screen a class (data-lazy-shown) is added to the parent.
I had a working model doing all of these things but it wouldn’t work on any element not shown on the screen during the initial page load process. It does work on elements not shown on the page at time of load in my first version shown above, but once I customized it, it no longer did. This is my javascript code currently.

(() => {
const initLazyMask = () => {
    const isImgInViewport = (img) => {
        const rect = img.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    const lazyMaskLoader = () => {
        const lazyParents = document.querySelectorAll('[data-lazy-mask]');
        let delay = 0;

        lazyParents.forEach((parent, i) => {
            const img = parent.querySelector('img');
            function add_mask(e, c) {
                m = document.createElement(e);
                m.classList.add(c);
                parent.appendChild(m) ;
            }
            
            if (isImgInViewport(img)) {
                if (img.getAttribute('data-src') !== null) {
                    img.setAttribute('src', img.getAttribute('data-src'));
                    img.removeAttribute('data-src');
                }
                if (img.getAttribute('data-srcset') !== null) {
                    img.setAttribute('srcset', img.getAttribute('data-srcset'));
                    img.removeAttribute('data-srcset');
                }
                
                setTimeout(() => {
                    parent.classList.add('data-lazy-shown');
                    img.classList.add('lazy-img-shown');
                    add_mask('div', 'cs-mask');
                }, delay);

                delay += 100; // Increment the delay for staggering
            }
        });

        // Remove event listeners if all images are loaded
        if (document.querySelectorAll('img[data-src]').length === 0 && document.querySelectorAll('img[data-srcset]').length === 0) {
            window.removeEventListener('DOMContentLoaded', lazyMaskLoader);
            window.removeEventListener('load', lazyMaskLoader);
            window.removeEventListener('resize', lazyMaskLoader);
            window.removeEventListener('scroll', lazyMaskLoader);
        }
    };

    // Add event listeners to images
    window.addEventListener('DOMContentLoaded', lazyMaskLoader);
    window.addEventListener('load', lazyMaskLoader);
    window.addEventListener('resize', lazyMaskLoader);
    window.addEventListener('scroll', lazyMaskLoader);
};

return initLazyMask();
})();

Here is the link to the current Codepen version I am trying to have work. Current Codepen Example

I need help.