基于Vanilla JavaScript的图片懒加载脚本问题求助

我正在为搭建的网站开发一款基于Vanilla JavaScript的自定义图片懒加载脚本。原本的基础版本可正常加载初始页面未显示的图片，但在将其优化为通过data-lazy-mask属性查找父元素、遍历加载内部图片，并在父元素进入视口时为其添加data-lazy-shown类后，该功能失效。

以下是当前的JavaScript代码：

(() => {
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();
})();

内容的提问来源于stack exchange，提问作者TIBrent