aboutsummaryrefslogtreecommitdiffstats
path: root/web/js/lazyload.js
blob: 770fc62d408d591e9116a25fb03ac563b8eb3905 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// jshint esversion: 6

(function(){
    if (!('IntersectionObserver' in window)) {
        return;
    }

    // Now we're here, we can assume quite modern JavaScript!

    const observer = new IntersectionObserver(onIntersection, {
        rootMargin: "50px 0px"
    });

    const images = document.querySelectorAll(".js-lazyload");
    images.forEach(image => {
        observer.observe(image);
    });

    function onIntersection(entries, observer) {
        entries.forEach(entry => {
            if (entry.intersectionRatio > 0) {
                // Loading the image is the only thing we care about, so can
                // stop observing.
                observer.unobserve(entry.target);
                // Removing this class (which is suppressing background-image)
                // will trigger the image load
                entry.target.classList.remove('js-lazyload');
            }
        });
    }
})();