M.AutoInit();

// Set up an intersection observer with some options
var observer = new IntersectionObserver(lazyLoad, {

    // where in relation to the edge of the viewport, we are observing
    rootMargin: "100px",

    // how much of the element needs to have intersected 
    // in order to fire our loading function
    threshold: 1.0

});

function lazyLoad(elements) {
    elements.forEach(image => {
        if (image.intersectionRatio > 0) {

            // set the src attribute to trigger a load
            image.src = image.dataset.src;

            // stop observing this element. Our work here is done!
            observer.unobserve(item.target);
        };
    });
};

// If the browser supports lazy loading, we can safely assign the src
// attributes without instantly triggering an eager image load.
if ("loading" in HTMLImageElement.prototype) {
    const lazyImages = document.querySelectorAll("img.lazy");
    lazyImages.forEach(img => {
        img.src = img.dataset.src;
    });
} else {
    // Use our own lazyLoading with Intersection Observers and all that jazz
}