818 lines
25 KiB
JavaScript
818 lines
25 KiB
JavaScript
|
(function (global, factory) {
|
||
|
typeof exports === 'object' && typeof module !== 'undefined'
|
||
|
? (module.exports = factory())
|
||
|
: typeof define === 'function' && define.amd
|
||
|
? define(factory)
|
||
|
: ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.LazyLoad = factory()));
|
||
|
})(this, function () {
|
||
|
'use strict';
|
||
|
|
||
|
function _extends() {
|
||
|
_extends =
|
||
|
Object.assign ||
|
||
|
function (target) {
|
||
|
for (var i = 1; i < arguments.length; i++) {
|
||
|
var source = arguments[i];
|
||
|
|
||
|
for (var key in source) {
|
||
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||
|
target[key] = source[key];
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return target;
|
||
|
};
|
||
|
|
||
|
return _extends.apply(this, arguments);
|
||
|
}
|
||
|
|
||
|
var runningOnBrowser = typeof window !== 'undefined';
|
||
|
var isBot = (runningOnBrowser && !('onscroll' in window)) || (typeof navigator !== 'undefined' && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent));
|
||
|
var supportsIntersectionObserver = runningOnBrowser && 'IntersectionObserver' in window;
|
||
|
var supportsClassList = runningOnBrowser && 'classList' in document.createElement('p');
|
||
|
var isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;
|
||
|
|
||
|
var defaultSettings = {
|
||
|
elements_selector: '.lazy',
|
||
|
container: isBot || runningOnBrowser ? document : null,
|
||
|
threshold: 300,
|
||
|
thresholds: null,
|
||
|
data_src: 'src',
|
||
|
data_srcset: 'srcset',
|
||
|
data_sizes: 'sizes',
|
||
|
data_bg: 'bg',
|
||
|
data_bg_hidpi: 'bg-hidpi',
|
||
|
data_bg_multi: 'bg-multi',
|
||
|
data_bg_multi_hidpi: 'bg-multi-hidpi',
|
||
|
data_poster: 'poster',
|
||
|
class_applied: 'applied',
|
||
|
class_loading: 'litespeed-loading',
|
||
|
class_loaded: 'litespeed-loaded', // https://docs.litespeedtech.com/lscache/lscwp/pageopt/#lazy-load-images
|
||
|
class_error: 'error',
|
||
|
class_entered: 'entered',
|
||
|
class_exited: 'exited',
|
||
|
unobserve_completed: true,
|
||
|
unobserve_entered: false,
|
||
|
cancel_on_exit: true,
|
||
|
callback_enter: null,
|
||
|
callback_exit: null,
|
||
|
callback_applied: null,
|
||
|
callback_loading: null,
|
||
|
callback_loaded: null,
|
||
|
callback_error: null,
|
||
|
callback_finish: null,
|
||
|
callback_cancel: null,
|
||
|
use_native: false,
|
||
|
};
|
||
|
var getExtendedSettings = function getExtendedSettings(customSettings) {
|
||
|
return _extends({}, defaultSettings, customSettings);
|
||
|
};
|
||
|
|
||
|
/* Creates instance and notifies it through the window element */
|
||
|
var createInstance = function createInstance(classObj, options) {
|
||
|
var event;
|
||
|
var eventString = 'LazyLoad::Initialized';
|
||
|
var instance = new classObj(options);
|
||
|
|
||
|
try {
|
||
|
// Works in modern browsers
|
||
|
event = new CustomEvent(eventString, {
|
||
|
detail: {
|
||
|
instance: instance,
|
||
|
},
|
||
|
});
|
||
|
} catch (err) {
|
||
|
// Works in Internet Explorer (all versions)
|
||
|
event = document.createEvent('CustomEvent');
|
||
|
event.initCustomEvent(eventString, false, false, {
|
||
|
instance: instance,
|
||
|
});
|
||
|
}
|
||
|
|
||
|
window.dispatchEvent(event);
|
||
|
};
|
||
|
/* Auto initialization of one or more instances of lazyload, depending on the
|
||
|
options passed in (plain object or an array) */
|
||
|
|
||
|
var autoInitialize = function autoInitialize(classObj, options) {
|
||
|
if (!options) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (!options.length) {
|
||
|
// Plain object
|
||
|
createInstance(classObj, options);
|
||
|
} else {
|
||
|
// Array of objects
|
||
|
for (var i = 0, optionsItem; (optionsItem = options[i]); i += 1) {
|
||
|
createInstance(classObj, optionsItem);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
var SRC = 'src';
|
||
|
var SRCSET = 'srcset';
|
||
|
var SIZES = 'sizes';
|
||
|
var POSTER = 'poster';
|
||
|
var ORIGINALS = 'llOriginalAttrs';
|
||
|
|
||
|
var statusLoading = 'loading';
|
||
|
var statusLoaded = 'loaded';
|
||
|
var statusApplied = 'applied';
|
||
|
var statusEntered = 'entered';
|
||
|
var statusError = 'error';
|
||
|
var statusNative = 'native';
|
||
|
|
||
|
var dataPrefix = 'data-';
|
||
|
var statusDataName = 'll-status';
|
||
|
var getData = function getData(element, attribute) {
|
||
|
return element.getAttribute(dataPrefix + attribute);
|
||
|
};
|
||
|
var setData = function setData(element, attribute, value) {
|
||
|
var attrName = dataPrefix + attribute;
|
||
|
|
||
|
if (value === null) {
|
||
|
element.removeAttribute(attrName);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
element.setAttribute(attrName, value);
|
||
|
};
|
||
|
var getStatus = function getStatus(element) {
|
||
|
return getData(element, statusDataName);
|
||
|
};
|
||
|
var setStatus = function setStatus(element, status) {
|
||
|
return setData(element, statusDataName, status);
|
||
|
};
|
||
|
var resetStatus = function resetStatus(element) {
|
||
|
return setStatus(element, null);
|
||
|
};
|
||
|
var hasEmptyStatus = function hasEmptyStatus(element) {
|
||
|
return getStatus(element) === null;
|
||
|
};
|
||
|
var hasStatusLoading = function hasStatusLoading(element) {
|
||
|
return getStatus(element) === statusLoading;
|
||
|
};
|
||
|
var hasStatusError = function hasStatusError(element) {
|
||
|
return getStatus(element) === statusError;
|
||
|
};
|
||
|
var hasStatusNative = function hasStatusNative(element) {
|
||
|
return getStatus(element) === statusNative;
|
||
|
};
|
||
|
var statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError];
|
||
|
var hadStartedLoading = function hadStartedLoading(element) {
|
||
|
return statusesAfterLoading.indexOf(getStatus(element)) >= 0;
|
||
|
};
|
||
|
|
||
|
var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
|
||
|
if (!callback) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (arg3 !== undefined) {
|
||
|
callback(arg1, arg2, arg3);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (arg2 !== undefined) {
|
||
|
callback(arg1, arg2);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
callback(arg1);
|
||
|
};
|
||
|
|
||
|
var addClass = function addClass(element, className) {
|
||
|
if (supportsClassList) {
|
||
|
element.classList.add(className);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
element.className += (element.className ? ' ' : '') + className;
|
||
|
};
|
||
|
var removeClass = function removeClass(element, className) {
|
||
|
if (supportsClassList) {
|
||
|
element.classList.remove(className);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
element.className = element.className
|
||
|
.replace(new RegExp('(^|\\s+)' + className + '(\\s+|$)'), ' ')
|
||
|
.replace(/^\s+/, '')
|
||
|
.replace(/\s+$/, '');
|
||
|
};
|
||
|
|
||
|
var addTempImage = function addTempImage(element) {
|
||
|
element.llTempImage = document.createElement('IMG');
|
||
|
};
|
||
|
var deleteTempImage = function deleteTempImage(element) {
|
||
|
delete element.llTempImage;
|
||
|
};
|
||
|
var getTempImage = function getTempImage(element) {
|
||
|
return element.llTempImage;
|
||
|
};
|
||
|
|
||
|
var unobserve = function unobserve(element, instance) {
|
||
|
if (!instance) return;
|
||
|
var observer = instance._observer;
|
||
|
if (!observer) return;
|
||
|
observer.unobserve(element);
|
||
|
};
|
||
|
var resetObserver = function resetObserver(observer) {
|
||
|
observer.disconnect();
|
||
|
};
|
||
|
var unobserveEntered = function unobserveEntered(element, settings, instance) {
|
||
|
if (settings.unobserve_entered) unobserve(element, instance);
|
||
|
};
|
||
|
|
||
|
var updateLoadingCount = function updateLoadingCount(instance, delta) {
|
||
|
if (!instance) return;
|
||
|
instance.loadingCount += delta;
|
||
|
};
|
||
|
var decreaseToLoadCount = function decreaseToLoadCount(instance) {
|
||
|
if (!instance) return;
|
||
|
instance.toLoadCount -= 1;
|
||
|
};
|
||
|
var setToLoadCount = function setToLoadCount(instance, value) {
|
||
|
if (!instance) return;
|
||
|
instance.toLoadCount = value;
|
||
|
};
|
||
|
var isSomethingLoading = function isSomethingLoading(instance) {
|
||
|
return instance.loadingCount > 0;
|
||
|
};
|
||
|
var haveElementsToLoad = function haveElementsToLoad(instance) {
|
||
|
return instance.toLoadCount > 0;
|
||
|
};
|
||
|
|
||
|
var getSourceTags = function getSourceTags(parentTag) {
|
||
|
var sourceTags = [];
|
||
|
|
||
|
for (var i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
|
||
|
if (childTag.tagName === 'SOURCE') {
|
||
|
sourceTags.push(childTag);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return sourceTags;
|
||
|
};
|
||
|
|
||
|
var forEachPictureSource = function forEachPictureSource(element, fn) {
|
||
|
var parent = element.parentNode;
|
||
|
|
||
|
if (!parent || parent.tagName !== 'PICTURE') {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var sourceTags = getSourceTags(parent);
|
||
|
sourceTags.forEach(fn);
|
||
|
};
|
||
|
var forEachVideoSource = function forEachVideoSource(element, fn) {
|
||
|
var sourceTags = getSourceTags(element);
|
||
|
sourceTags.forEach(fn);
|
||
|
};
|
||
|
|
||
|
var attrsSrc = [SRC];
|
||
|
var attrsSrcPoster = [SRC, POSTER];
|
||
|
var attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES];
|
||
|
var hasOriginalAttrs = function hasOriginalAttrs(element) {
|
||
|
return !!element[ORIGINALS];
|
||
|
};
|
||
|
var getOriginalAttrs = function getOriginalAttrs(element) {
|
||
|
return element[ORIGINALS];
|
||
|
};
|
||
|
var deleteOriginalAttrs = function deleteOriginalAttrs(element) {
|
||
|
return delete element[ORIGINALS];
|
||
|
}; // ## SAVE ##
|
||
|
|
||
|
var setOriginalsObject = function setOriginalsObject(element, attributes) {
|
||
|
if (hasOriginalAttrs(element)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var originals = {};
|
||
|
attributes.forEach(function (attribute) {
|
||
|
originals[attribute] = element.getAttribute(attribute);
|
||
|
});
|
||
|
element[ORIGINALS] = originals;
|
||
|
};
|
||
|
var saveOriginalBackgroundStyle = function saveOriginalBackgroundStyle(element) {
|
||
|
if (hasOriginalAttrs(element)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
element[ORIGINALS] = {
|
||
|
backgroundImage: element.style.backgroundImage,
|
||
|
};
|
||
|
}; // ## RESTORE ##
|
||
|
|
||
|
var setOrResetAttribute = function setOrResetAttribute(element, attrName, value) {
|
||
|
if (!value) {
|
||
|
element.removeAttribute(attrName);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
element.setAttribute(attrName, value);
|
||
|
};
|
||
|
|
||
|
var restoreOriginalAttrs = function restoreOriginalAttrs(element, attributes) {
|
||
|
if (!hasOriginalAttrs(element)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var originals = getOriginalAttrs(element);
|
||
|
attributes.forEach(function (attribute) {
|
||
|
setOrResetAttribute(element, attribute, originals[attribute]);
|
||
|
});
|
||
|
};
|
||
|
var restoreOriginalBgImage = function restoreOriginalBgImage(element) {
|
||
|
if (!hasOriginalAttrs(element)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var originals = getOriginalAttrs(element);
|
||
|
element.style.backgroundImage = originals.backgroundImage;
|
||
|
};
|
||
|
|
||
|
var manageApplied = function manageApplied(element, settings, instance) {
|
||
|
addClass(element, settings.class_applied);
|
||
|
setStatus(element, statusApplied); // Instance is not provided when loading is called from static class
|
||
|
|
||
|
if (!instance) return;
|
||
|
|
||
|
if (settings.unobserve_completed) {
|
||
|
// Unobserve now because we can't do it on load
|
||
|
unobserve(element, settings);
|
||
|
}
|
||
|
|
||
|
safeCallback(settings.callback_applied, element, instance);
|
||
|
};
|
||
|
var manageLoading = function manageLoading(element, settings, instance) {
|
||
|
addClass(element, settings.class_loading);
|
||
|
setStatus(element, statusLoading); // Instance is not provided when loading is called from static class
|
||
|
|
||
|
if (!instance) return;
|
||
|
updateLoadingCount(instance, +1);
|
||
|
safeCallback(settings.callback_loading, element, instance);
|
||
|
};
|
||
|
var setAttributeIfValue = function setAttributeIfValue(element, attrName, value) {
|
||
|
if (!value) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
element.setAttribute(attrName, value);
|
||
|
};
|
||
|
var setImageAttributes = function setImageAttributes(element, settings) {
|
||
|
setAttributeIfValue(element, SIZES, getData(element, settings.data_sizes));
|
||
|
setAttributeIfValue(element, SRCSET, getData(element, settings.data_srcset));
|
||
|
setAttributeIfValue(element, SRC, getData(element, settings.data_src));
|
||
|
};
|
||
|
var setSourcesImg = function setSourcesImg(imgEl, settings) {
|
||
|
forEachPictureSource(imgEl, function (sourceTag) {
|
||
|
setOriginalsObject(sourceTag, attrsSrcSrcsetSizes);
|
||
|
setImageAttributes(sourceTag, settings);
|
||
|
});
|
||
|
setOriginalsObject(imgEl, attrsSrcSrcsetSizes);
|
||
|
setImageAttributes(imgEl, settings);
|
||
|
};
|
||
|
var setSourcesIframe = function setSourcesIframe(iframe, settings) {
|
||
|
setOriginalsObject(iframe, attrsSrc);
|
||
|
setAttributeIfValue(iframe, SRC, getData(iframe, settings.data_src));
|
||
|
};
|
||
|
var setSourcesVideo = function setSourcesVideo(videoEl, settings) {
|
||
|
forEachVideoSource(videoEl, function (sourceEl) {
|
||
|
setOriginalsObject(sourceEl, attrsSrc);
|
||
|
setAttributeIfValue(sourceEl, SRC, getData(sourceEl, settings.data_src));
|
||
|
});
|
||
|
setOriginalsObject(videoEl, attrsSrcPoster);
|
||
|
setAttributeIfValue(videoEl, POSTER, getData(videoEl, settings.data_poster));
|
||
|
setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src));
|
||
|
videoEl.load();
|
||
|
};
|
||
|
var setBackground = function setBackground(element, settings, instance) {
|
||
|
var bg1xValue = getData(element, settings.data_bg);
|
||
|
var bgHiDpiValue = getData(element, settings.data_bg_hidpi);
|
||
|
var bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
|
||
|
if (!bgDataValue) return;
|
||
|
element.style.backgroundImage = 'url("'.concat(bgDataValue, '")');
|
||
|
getTempImage(element).setAttribute(SRC, bgDataValue);
|
||
|
manageLoading(element, settings, instance);
|
||
|
}; // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
|
||
|
// BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
|
||
|
// COULD BE A GRADIENT BACKGROUND IMAGE
|
||
|
|
||
|
var setMultiBackground = function setMultiBackground(element, settings, instance) {
|
||
|
var bg1xValue = getData(element, settings.data_bg_multi);
|
||
|
var bgHiDpiValue = getData(element, settings.data_bg_multi_hidpi);
|
||
|
var bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
|
||
|
|
||
|
if (!bgDataValue) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
element.style.backgroundImage = bgDataValue;
|
||
|
manageApplied(element, settings, instance);
|
||
|
};
|
||
|
var setSourcesFunctions = {
|
||
|
IMG: setSourcesImg,
|
||
|
IFRAME: setSourcesIframe,
|
||
|
VIDEO: setSourcesVideo,
|
||
|
};
|
||
|
var setSourcesNative = function setSourcesNative(element, settings) {
|
||
|
var setSourcesFunction = setSourcesFunctions[element.tagName];
|
||
|
|
||
|
if (!setSourcesFunction) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
setSourcesFunction(element, settings);
|
||
|
};
|
||
|
var setSources = function setSources(element, settings, instance) {
|
||
|
var setSourcesFunction = setSourcesFunctions[element.tagName];
|
||
|
|
||
|
if (!setSourcesFunction) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
setSourcesFunction(element, settings);
|
||
|
manageLoading(element, settings, instance);
|
||
|
};
|
||
|
|
||
|
var elementsWithLoadEvent = ['IMG', 'IFRAME', 'VIDEO'];
|
||
|
var hasLoadEvent = function hasLoadEvent(element) {
|
||
|
return elementsWithLoadEvent.indexOf(element.tagName) > -1;
|
||
|
};
|
||
|
var checkFinish = function checkFinish(settings, instance) {
|
||
|
if (instance && !isSomethingLoading(instance) && !haveElementsToLoad(instance)) {
|
||
|
safeCallback(settings.callback_finish, instance);
|
||
|
}
|
||
|
};
|
||
|
var addEventListener = function addEventListener(element, eventName, handler) {
|
||
|
element.addEventListener(eventName, handler);
|
||
|
element.llEvLisnrs[eventName] = handler;
|
||
|
};
|
||
|
var removeEventListener = function removeEventListener(element, eventName, handler) {
|
||
|
element.removeEventListener(eventName, handler);
|
||
|
};
|
||
|
var hasEventListeners = function hasEventListeners(element) {
|
||
|
return !!element.llEvLisnrs;
|
||
|
};
|
||
|
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
|
||
|
if (!hasEventListeners(element)) element.llEvLisnrs = {};
|
||
|
var loadEventName = element.tagName === 'VIDEO' ? 'loadeddata' : 'load';
|
||
|
addEventListener(element, loadEventName, loadHandler);
|
||
|
addEventListener(element, 'error', errorHandler);
|
||
|
};
|
||
|
var removeEventListeners = function removeEventListeners(element) {
|
||
|
if (!hasEventListeners(element)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var eventListeners = element.llEvLisnrs;
|
||
|
|
||
|
for (var eventName in eventListeners) {
|
||
|
var handler = eventListeners[eventName];
|
||
|
removeEventListener(element, eventName, handler);
|
||
|
}
|
||
|
|
||
|
delete element.llEvLisnrs;
|
||
|
};
|
||
|
var doneHandler = function doneHandler(element, settings, instance) {
|
||
|
deleteTempImage(element);
|
||
|
updateLoadingCount(instance, -1);
|
||
|
decreaseToLoadCount(instance);
|
||
|
removeClass(element, settings.class_loading);
|
||
|
|
||
|
if (settings.unobserve_completed) {
|
||
|
unobserve(element, instance);
|
||
|
}
|
||
|
};
|
||
|
var loadHandler = function loadHandler(event, element, settings, instance) {
|
||
|
var goingNative = hasStatusNative(element);
|
||
|
doneHandler(element, settings, instance);
|
||
|
addClass(element, settings.class_loaded);
|
||
|
setStatus(element, statusLoaded);
|
||
|
safeCallback(settings.callback_loaded, element, instance);
|
||
|
if (!goingNative) checkFinish(settings, instance);
|
||
|
};
|
||
|
var errorHandler = function errorHandler(event, element, settings, instance) {
|
||
|
var goingNative = hasStatusNative(element);
|
||
|
doneHandler(element, settings, instance);
|
||
|
addClass(element, settings.class_error);
|
||
|
setStatus(element, statusError);
|
||
|
safeCallback(settings.callback_error, element, instance);
|
||
|
if (!goingNative) checkFinish(settings, instance);
|
||
|
};
|
||
|
var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
|
||
|
var elementToListenTo = getTempImage(element) || element;
|
||
|
|
||
|
if (hasEventListeners(elementToListenTo)) {
|
||
|
// This happens when loading is retried twice
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var _loadHandler = function _loadHandler(event) {
|
||
|
loadHandler(event, element, settings, instance);
|
||
|
removeEventListeners(elementToListenTo);
|
||
|
};
|
||
|
|
||
|
var _errorHandler = function _errorHandler(event) {
|
||
|
errorHandler(event, element, settings, instance);
|
||
|
removeEventListeners(elementToListenTo);
|
||
|
};
|
||
|
|
||
|
addEventListeners(elementToListenTo, _loadHandler, _errorHandler);
|
||
|
};
|
||
|
|
||
|
var loadBackground = function loadBackground(element, settings, instance) {
|
||
|
addTempImage(element);
|
||
|
addOneShotEventListeners(element, settings, instance);
|
||
|
saveOriginalBackgroundStyle(element);
|
||
|
setBackground(element, settings, instance);
|
||
|
setMultiBackground(element, settings, instance);
|
||
|
};
|
||
|
|
||
|
var loadRegular = function loadRegular(element, settings, instance) {
|
||
|
addOneShotEventListeners(element, settings, instance);
|
||
|
setSources(element, settings, instance);
|
||
|
};
|
||
|
|
||
|
var load = function load(element, settings, instance) {
|
||
|
if (hasLoadEvent(element)) {
|
||
|
loadRegular(element, settings, instance);
|
||
|
} else {
|
||
|
loadBackground(element, settings, instance);
|
||
|
}
|
||
|
};
|
||
|
var loadNative = function loadNative(element, settings, instance) {
|
||
|
element.setAttribute('loading', 'lazy');
|
||
|
addOneShotEventListeners(element, settings, instance);
|
||
|
setSourcesNative(element, settings);
|
||
|
setStatus(element, statusNative);
|
||
|
};
|
||
|
|
||
|
var removeImageAttributes = function removeImageAttributes(element) {
|
||
|
element.removeAttribute(SRC);
|
||
|
element.removeAttribute(SRCSET);
|
||
|
element.removeAttribute(SIZES);
|
||
|
};
|
||
|
|
||
|
var resetSourcesImg = function resetSourcesImg(element) {
|
||
|
forEachPictureSource(element, function (sourceTag) {
|
||
|
removeImageAttributes(sourceTag);
|
||
|
});
|
||
|
removeImageAttributes(element);
|
||
|
};
|
||
|
|
||
|
var restoreImg = function restoreImg(imgEl) {
|
||
|
forEachPictureSource(imgEl, function (sourceEl) {
|
||
|
restoreOriginalAttrs(sourceEl, attrsSrcSrcsetSizes);
|
||
|
});
|
||
|
restoreOriginalAttrs(imgEl, attrsSrcSrcsetSizes);
|
||
|
};
|
||
|
var restoreVideo = function restoreVideo(videoEl) {
|
||
|
forEachVideoSource(videoEl, function (sourceEl) {
|
||
|
restoreOriginalAttrs(sourceEl, attrsSrc);
|
||
|
});
|
||
|
restoreOriginalAttrs(videoEl, attrsSrcPoster);
|
||
|
videoEl.load();
|
||
|
};
|
||
|
var restoreIframe = function restoreIframe(iframeEl) {
|
||
|
restoreOriginalAttrs(iframeEl, attrsSrc);
|
||
|
};
|
||
|
var restoreFunctions = {
|
||
|
IMG: restoreImg,
|
||
|
IFRAME: restoreIframe,
|
||
|
VIDEO: restoreVideo,
|
||
|
};
|
||
|
|
||
|
var restoreAttributes = function restoreAttributes(element) {
|
||
|
var restoreFunction = restoreFunctions[element.tagName];
|
||
|
|
||
|
if (!restoreFunction) {
|
||
|
restoreOriginalBgImage(element);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
restoreFunction(element);
|
||
|
};
|
||
|
|
||
|
var resetClasses = function resetClasses(element, settings) {
|
||
|
if (hasEmptyStatus(element) || hasStatusNative(element)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
removeClass(element, settings.class_entered);
|
||
|
removeClass(element, settings.class_exited);
|
||
|
removeClass(element, settings.class_applied);
|
||
|
removeClass(element, settings.class_loading);
|
||
|
removeClass(element, settings.class_loaded);
|
||
|
removeClass(element, settings.class_error);
|
||
|
};
|
||
|
|
||
|
var restore = function restore(element, settings) {
|
||
|
restoreAttributes(element);
|
||
|
resetClasses(element, settings);
|
||
|
resetStatus(element);
|
||
|
deleteOriginalAttrs(element);
|
||
|
};
|
||
|
|
||
|
var cancelLoading = function cancelLoading(element, entry, settings, instance) {
|
||
|
if (!settings.cancel_on_exit) return;
|
||
|
if (!hasStatusLoading(element)) return;
|
||
|
if (element.tagName !== 'IMG') return; //Works only on images
|
||
|
|
||
|
removeEventListeners(element);
|
||
|
resetSourcesImg(element);
|
||
|
restoreImg(element);
|
||
|
removeClass(element, settings.class_loading);
|
||
|
updateLoadingCount(instance, -1);
|
||
|
resetStatus(element);
|
||
|
safeCallback(settings.callback_cancel, element, entry, instance);
|
||
|
};
|
||
|
|
||
|
var onEnter = function onEnter(element, entry, settings, instance) {
|
||
|
var dontLoad = hadStartedLoading(element);
|
||
|
/* Save status
|
||
|
before setting it, to prevent loading it again. Fixes #526. */
|
||
|
|
||
|
setStatus(element, statusEntered);
|
||
|
addClass(element, settings.class_entered);
|
||
|
removeClass(element, settings.class_exited);
|
||
|
unobserveEntered(element, settings, instance);
|
||
|
safeCallback(settings.callback_enter, element, entry, instance);
|
||
|
if (dontLoad) return;
|
||
|
load(element, settings, instance);
|
||
|
};
|
||
|
var onExit = function onExit(element, entry, settings, instance) {
|
||
|
if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing
|
||
|
|
||
|
addClass(element, settings.class_exited);
|
||
|
cancelLoading(element, entry, settings, instance);
|
||
|
safeCallback(settings.callback_exit, element, entry, instance);
|
||
|
};
|
||
|
|
||
|
var tagsWithNativeLazy = ['IMG', 'IFRAME', 'VIDEO'];
|
||
|
var shouldUseNative = function shouldUseNative(settings) {
|
||
|
return settings.use_native && 'loading' in HTMLImageElement.prototype;
|
||
|
};
|
||
|
var loadAllNative = function loadAllNative(elements, settings, instance) {
|
||
|
elements.forEach(function (element) {
|
||
|
if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
loadNative(element, settings, instance);
|
||
|
});
|
||
|
setToLoadCount(instance, 0);
|
||
|
};
|
||
|
|
||
|
var isIntersecting = function isIntersecting(entry) {
|
||
|
return entry.isIntersecting || entry.intersectionRatio > 0;
|
||
|
};
|
||
|
|
||
|
var getObserverSettings = function getObserverSettings(settings) {
|
||
|
return {
|
||
|
root: settings.container === document ? null : settings.container,
|
||
|
rootMargin: settings.thresholds || settings.threshold + 'px',
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var intersectionHandler = function intersectionHandler(entries, settings, instance) {
|
||
|
entries.forEach(function (entry) {
|
||
|
return isIntersecting(entry) ? onEnter(entry.target, entry, settings, instance) : onExit(entry.target, entry, settings, instance);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
var observeElements = function observeElements(observer, elements) {
|
||
|
elements.forEach(function (element) {
|
||
|
observer.observe(element);
|
||
|
});
|
||
|
};
|
||
|
var updateObserver = function updateObserver(observer, elementsToObserve) {
|
||
|
resetObserver(observer);
|
||
|
observeElements(observer, elementsToObserve);
|
||
|
};
|
||
|
var setObserver = function setObserver(settings, instance) {
|
||
|
if (!supportsIntersectionObserver || shouldUseNative(settings)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
instance._observer = new IntersectionObserver(function (entries) {
|
||
|
intersectionHandler(entries, settings, instance);
|
||
|
}, getObserverSettings(settings));
|
||
|
};
|
||
|
|
||
|
var toArray = function toArray(nodeSet) {
|
||
|
return Array.prototype.slice.call(nodeSet);
|
||
|
};
|
||
|
var queryElements = function queryElements(settings) {
|
||
|
return settings.container.querySelectorAll(settings.elements_selector);
|
||
|
};
|
||
|
var excludeManagedElements = function excludeManagedElements(elements) {
|
||
|
return toArray(elements).filter(hasEmptyStatus);
|
||
|
};
|
||
|
var hasError = function hasError(element) {
|
||
|
return hasStatusError(element);
|
||
|
};
|
||
|
var filterErrorElements = function filterErrorElements(elements) {
|
||
|
return toArray(elements).filter(hasError);
|
||
|
};
|
||
|
var getElementsToLoad = function getElementsToLoad(elements, settings) {
|
||
|
return excludeManagedElements(elements || queryElements(settings));
|
||
|
};
|
||
|
|
||
|
var retryLazyLoad = function retryLazyLoad(settings, instance) {
|
||
|
var errorElements = filterErrorElements(queryElements(settings));
|
||
|
errorElements.forEach(function (element) {
|
||
|
removeClass(element, settings.class_error);
|
||
|
resetStatus(element);
|
||
|
});
|
||
|
instance.update();
|
||
|
};
|
||
|
var setOnlineCheck = function setOnlineCheck(settings, instance) {
|
||
|
if (!runningOnBrowser) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
window.addEventListener('online', function () {
|
||
|
retryLazyLoad(settings, instance);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
var LazyLoad = function LazyLoad(customSettings, elements) {
|
||
|
var settings = getExtendedSettings(customSettings);
|
||
|
this._settings = settings;
|
||
|
this.loadingCount = 0;
|
||
|
setObserver(settings, this);
|
||
|
setOnlineCheck(settings, this);
|
||
|
this.update(elements);
|
||
|
};
|
||
|
|
||
|
LazyLoad.prototype = {
|
||
|
update: function update(givenNodeset) {
|
||
|
var settings = this._settings;
|
||
|
var elementsToLoad = getElementsToLoad(givenNodeset, settings);
|
||
|
setToLoadCount(this, elementsToLoad.length);
|
||
|
|
||
|
if (isBot || !supportsIntersectionObserver) {
|
||
|
this.loadAll(elementsToLoad);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (shouldUseNative(settings)) {
|
||
|
loadAllNative(elementsToLoad, settings, this);
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
updateObserver(this._observer, elementsToLoad);
|
||
|
},
|
||
|
destroy: function destroy() {
|
||
|
// Observer
|
||
|
if (this._observer) {
|
||
|
this._observer.disconnect();
|
||
|
} // Clean custom attributes on elements
|
||
|
|
||
|
queryElements(this._settings).forEach(function (element) {
|
||
|
deleteOriginalAttrs(element);
|
||
|
}); // Delete all internal props
|
||
|
|
||
|
delete this._observer;
|
||
|
delete this._settings;
|
||
|
delete this.loadingCount;
|
||
|
delete this.toLoadCount;
|
||
|
},
|
||
|
loadAll: function loadAll(elements) {
|
||
|
var _this = this;
|
||
|
|
||
|
var settings = this._settings;
|
||
|
var elementsToLoad = getElementsToLoad(elements, settings);
|
||
|
elementsToLoad.forEach(function (element) {
|
||
|
unobserve(element, _this);
|
||
|
load(element, settings, _this);
|
||
|
});
|
||
|
},
|
||
|
restoreAll: function restoreAll() {
|
||
|
var settings = this._settings;
|
||
|
queryElements(settings).forEach(function (element) {
|
||
|
restore(element, settings);
|
||
|
});
|
||
|
},
|
||
|
};
|
||
|
|
||
|
LazyLoad.load = function (element, customSettings) {
|
||
|
var settings = getExtendedSettings(customSettings);
|
||
|
load(element, settings);
|
||
|
};
|
||
|
|
||
|
LazyLoad.resetStatus = function (element) {
|
||
|
resetStatus(element);
|
||
|
}; // Automatic instances creation if required (useful for async script loading)
|
||
|
|
||
|
if (runningOnBrowser) {
|
||
|
autoInitialize(LazyLoad, window.lazyLoadOptions);
|
||
|
}
|
||
|
|
||
|
return LazyLoad;
|
||
|
});
|