function lazyload() {
    const lazy = document.querySelectorAll(".lazy")

    const intersection_handler = (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const el = entry.target;

                if (el.tagName === "IMG") {
                    el.src = el.src.replace(".jpg", "_full.jpg")
                }
                el.style.backgroundImage = el.style.backgroundImage.replace(".jpg", "_full.jpg")

                el.classList.remove('lazy');
                observer.unobserve(entry.target); // Stop observing once loaded
            }
        });
    };

    const observer = new IntersectionObserver(intersection_handler, {
        root: null,
        rootMargin: "0px 0px 50px 0px",
        threshold: 0.1
    });

    lazy.forEach(img => observer.observe(img));
}

document.addEventListener('DOMContentLoaded', lazyload);