https://cdnn.1prime.ru//js/libs/lazyload.js

1
2// PolyFill for "isIntersecting"
3// https://github.com/w3c/IntersectionObserver/issues/211#issuecomment-309144669
4if ('IntersectionObserver' in window &&
5    'IntersectionObserverEntry' in window &&
6    'intersectionRatio' in window.IntersectionObserverEntry.prototype &&
7    !('isIntersecting' in IntersectionObserverEntry.prototype)) {
8
9    Object.defineProperty(window.IntersectionObserverEntry.prototype, 'isIntersecting', {
10        get: function () {
11            return this.intersectionRatio > 0
12        }
13    })
14}
15
16
17function lazyload() {
18    var lazyImages = [].slice.call(document.querySelectorAll(".lazyload"));
19
20    if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
21        var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
22            entries.forEach(function(entry) {
23                if (entry.isIntersecting) {
24                    var lazyImage = entry.target;
25                    lazyloadImage(lazyImage);
26                    lazyImage.classList.remove("lazyload");
27                    lazyImageObserver.unobserve(lazyImage);
28                }
29            });
30        }, {
31            rootMargin: "100px"
32        });
33
34        lazyImages.forEach(function(lazyImage) {
35            lazyImageObserver.observe(lazyImage);
36        });
37    } else {
38        setTimeout(function() {
39            lazyImages.forEach(function(lazyImage) {
40                lazyloadImage(lazyImage)
41            });
42        }, 1000)
43    }
44}
45
46function lazyloadImage(image) {
47    if (image.dataset && image.dataset.srcset) {
48        image.srcset = image.dataset.srcset;
49    }
50
51    if (image.dataset && image.dataset.src) {
52        // setTimeout(function() {
53            image.src = image.dataset.src;
54        // }, 500)
55    }
56}
57
58function lazyloadScript(selectors, callback) {
59    if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
60        var scriptObserver = new IntersectionObserver(function(entries, observer) {
61            entries.forEach(function(entry) {
62                if (entry.isIntersecting) {
63                    callback.apply();
64                    scriptObserver.disconnect();
65                }
66            });
67        }, {
68            rootMargin: '30% 0px'
69        });
70        var els = [].slice.call(document.querySelectorAll(selectors));
71        els.forEach(function(el) {
72            scriptObserver.observe(el);
73        });
74    } else {
75        callback.apply();
76    }
77}
78
79
80// PolyFill for nodelist.foreach()
81// https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
82// if (window.NodeList && !NodeList.prototype.forEach) {
83//     NodeList.prototype.forEach = function (callback, thisArg) {
84//         thisArg = thisArg || window;
85//         for (var i = 0; i < this.length; i++) {
86//             callback.call(thisArg, this[i], i, this);
87//         }
88//     };
89// }
90