https://www.traum-camper.com/js/_essentials/lazyLoad.js

1/**
2 * @desc lazyload any src or srcset attribute
3 * @author Dominik Kressler
4 * @editor Dario Rieke
5 * @version 2.0.1
6 */
7var LazyLoad = function(options) {
8    var defaults = {
9        offset: '100px',
10        threshold: 0,
11        selector: '',
12        nodeList: false,
13        observe: false
14    }
15
16    var settings = J.merge(defaults, options)
17    settings.nodes = false
18
19    if(settings.nodeList && J.isNodeElement(settings.nodeList)) settings.nodes = settings.nodeList
20    if(settings.nodes === false) settings.nodes = document.querySelectorAll(settings.selector)
21   
22    if(settings.nodes instanceof NodeList) settings.nodes = Array.prototype.slice.call(settings.nodes)
23    else settings.nodes = [settings.nodes]
24
25    if(settings.nodes.length === 0) return this
26
27    const observer = new IntersectionObserver((entries, obs) => {
28        for(let entry of entries) {
29            if(entry.isIntersecting === false) continue
30            let elem = entry.target;
31            const loadedCallbackTarget = elem.nodeName != 'PICTURE' ? elem : elem.querySelector('img');
32            loadedCallbackTarget.classList.add('lazy-processing', 'is-on-screen');
33            loadedCallbackTarget.addEventListener('load', (e) => { e.target.classList.add('lazy-loaded') });
34
35            if(elem.nodeName == 'PICTURE')
36            {
37                var childs = elem.querySelectorAll('img, source')
38                for(let child of childs)
39                {
40                    if(child.hasAttribute('data-src')) child.setAttribute('src', child.getAttribute('data-src'))
41                    if(child.hasAttribute('data-srcset')) child.setAttribute('srcset', child.getAttribute('data-srcset'))
42                }
43            }
44            else if(elem.nodeName == 'IMG')
45            {
46                if(elem.hasAttribute('data-srcset')) elem.srcset = elem.getAttribute('data-srcset')
47                if(elem.hasAttribute('data-src')) elem.src = elem.getAttribute('data-src')
48            }
49            else if(elem.nodeName == 'IFRAME')
50            {
51                elem.src = elem.getAttribute('data-src')
52            }
53            else
54            {
55                elem.classList.add('lazy-loaded')
56            }
57
58            observer.unobserve(elem)
59        }
60    }, {
61        rootMargin: settings.offset,
62        threshold: settings.threshold
63    })
64    for(let node of settings.nodes) {
65        observer.observe(node)
66    }
67
68    if("MutationObserver" in window && settings.observe)
69    {    
70        const observer = new MutationObserver(function(mutationsList, observer) {
71            let re = new RegExp(',', 'g')
72            let newSelector = settings.selector.replace(re, ':not(.lazy-processing),') + ':not(.lazy-processing)'
73            for(let mutation of mutationsList) {
74                new LazyLoad({offset: settings.offset, threshold: settings.threshold, selector:settings.selector, nodeList: document.querySelectorAll(newSelector), observe: false})
75            }
76        });
77    
78        observer.observe(settings.observe, {childList: true, subtree: true})
79    }
80
81    return this
82}