const observerConfig = {
    rootMargin: '0px 0px 50px 0px',
    threshold: 0
}

const observer = new IntersectionObserver(
    (entries, self) => {
        for (const entry of entries) {
            if (entry.isIntersecting) {
                const element = entry.target
                const src = entry.target.getAttribute("data-src")

                element.setAttribute("src", src)
                self.unobserve(element)
            }
        }
    },
    observerConfig
)


const images = document.querySelectorAll('img[data-src]') ?? []
for (const image of images)
    observer.observe(image)