| 1 |
/* eslint-disable no-unused-vars, radix */ |
| 2 |
// eslint-disable-next-line no-use-before-define |
| 3 |
const PCLL_options = PCLL_options || {}; |
| 4 |
|
| 5 |
const PCLL = (function () { |
| 6 |
const PCLL = { |
| 7 |
_lastCheckTs: 0, |
| 8 |
_checkDebounceTimeoutRunning: false, |
| 9 |
|
| 10 |
init() { |
| 11 |
PCLL.threshold = PCLL.getOptionIntValue('threshold', 200); |
| 12 |
PCLL.recheckDelay = PCLL.getOptionIntValue('recheck_delay', 250); |
| 13 |
PCLL.debounce = PCLL.getOptionIntValue('debounce', 50); |
| 14 |
PCLL.checkRecurring(); |
| 15 |
return PCLL; |
| 16 |
}, |
| 17 |
|
| 18 |
check(fromDebounceTimeout) { |
| 19 |
let updated; |
| 20 |
if (fromDebounceTimeout === true) { |
| 21 |
PCLL._checkDebounceTimeoutRunning = false; |
| 22 |
} |
| 23 |
const tstamp = performance.now(); |
| 24 |
if (tstamp < PCLL._lastCheckTs + PCLL.debounce) { |
| 25 |
if (!PCLL._checkDebounceTimeoutRunning) { |
| 26 |
PCLL._checkDebounceTimeoutRunning = true; |
| 27 |
setTimeout(function () { |
| 28 |
PCLL.check(true); |
| 29 |
}, PCLL.debounce); |
| 30 |
} |
| 31 |
return; |
| 32 |
} |
| 33 |
PCLL._lastCheckTs = tstamp; |
| 34 |
|
| 35 |
const winH = document.documentElement.clientHeight || document.body.clientHeight; |
| 36 |
updated = false; |
| 37 |
const els = document.getElementsByClassName('lazy-hidden'); |
| 38 |
|
| 39 |
[].forEach.call(els, function (el, index, array) { |
| 40 |
const elemRect = el.getBoundingClientRect(); |
| 41 |
|
| 42 |
// do not lazy-load images that are hidden with display:none or have a width/height of 0 |
| 43 |
if (!elemRect.width || !elemRect.height) { |
| 44 |
return; |
| 45 |
} |
| 46 |
|
| 47 |
if (winH - elemRect.top + PCLL.threshold > 0) { |
| 48 |
PCLL.show(el); |
| 49 |
updated = true; |
| 50 |
} |
| 51 |
}); |
| 52 |
|
| 53 |
if (updated) { |
| 54 |
PCLL.check(); |
| 55 |
} |
| 56 |
}, |
| 57 |
|
| 58 |
checkRecurring() { |
| 59 |
PCLL.check(); |
| 60 |
setTimeout(PCLL.checkRecurring, PCLL.recheckDelay); |
| 61 |
}, |
| 62 |
|
| 63 |
show(el) { |
| 64 |
let s; |
| 65 |
let div; |
| 66 |
let iframe; |
| 67 |
el.className = el.className.replace(/(?:^|\s)lazy-hidden(?!\S)/g, ''); |
| 68 |
el.addEventListener( |
| 69 |
'load', |
| 70 |
function () { |
| 71 |
el.className += ' lazy-loaded'; |
| 72 |
PCLL.customEvent(el, 'lazyloaded'); |
| 73 |
}, |
| 74 |
false, |
| 75 |
); |
| 76 |
|
| 77 |
const type = el.getAttribute('data-lazy-type'); |
| 78 |
|
| 79 |
if (type === 'image') { |
| 80 |
if (el.getAttribute('data-lazy-srcset') != null) { |
| 81 |
el.setAttribute('srcset', el.getAttribute('data-lazy-srcset')); |
| 82 |
} |
| 83 |
if (el.getAttribute('data-lazy-sizes') != null) { |
| 84 |
el.setAttribute('sizes', el.getAttribute('data-lazy-sizes')); |
| 85 |
} |
| 86 |
el.setAttribute('src', el.getAttribute('data-lazy-src')); |
| 87 |
} else if (type === 'iframe') { |
| 88 |
s = el.getAttribute('data-lazy-src'); |
| 89 |
div = document.createElement('div'); |
| 90 |
|
| 91 |
div.innerHTML = s; |
| 92 |
iframe = div.firstChild; |
| 93 |
el.parentNode.replaceChild(iframe, el); |
| 94 |
} |
| 95 |
}, |
| 96 |
|
| 97 |
customEvent(el, eventName) { |
| 98 |
let event; |
| 99 |
|
| 100 |
if (document.createEvent) { |
| 101 |
event = document.createEvent('HTMLEvents'); |
| 102 |
event.initEvent(eventName, true, true); |
| 103 |
} else { |
| 104 |
event = document.createEventObject(); |
| 105 |
event.eventType = eventName; |
| 106 |
} |
| 107 |
|
| 108 |
event.eventName = eventName; |
| 109 |
|
| 110 |
if (document.createEvent) { |
| 111 |
el.dispatchEvent(event); |
| 112 |
} else { |
| 113 |
el.fireEvent(`on${event.eventType}`, event); |
| 114 |
} |
| 115 |
}, |
| 116 |
|
| 117 |
getOptionIntValue(name, defaultValue) { |
| 118 |
// eslint-disable-next-line camelcase |
| 119 |
if (typeof PCLL_options[name] !== 'undefined') { |
| 120 |
// eslint-disable-next-line camelcase |
| 121 |
return parseInt(PCLL_options[name], 0); |
| 122 |
} |
| 123 |
return defaultValue; |
| 124 |
}, |
| 125 |
}; |
| 126 |
return PCLL.init(); |
| 127 |
})(); |
| 128 |
|
| 129 |
window.addEventListener('load', PCLL.check, false); |
| 130 |
window.addEventListener('scroll', PCLL.check, false); |
| 131 |
window.addEventListener('resize', PCLL.check, false); |
| 132 |
document.getElementsByTagName('body').item(0).addEventListener('post-load', PCLL.check, false); |
| 133 |
|
