Initial commit
This commit is contained in:
858
lazyload/v17/dist/lazyload.amd.js
vendored
Normal file
858
lazyload/v17/dist/lazyload.amd.js
vendored
Normal file
@ -0,0 +1,858 @@
|
||||
define(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_bg_set: "bg-set",
|
||||
data_poster: "poster",
|
||||
class_applied: "applied",
|
||||
class_loading: "loading",
|
||||
class_loaded: "loaded",
|
||||
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,
|
||||
restore_on_error: 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 DATA = "data";
|
||||
|
||||
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 attrsData = [DATA];
|
||||
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 setSourcesObject = function setSourcesObject(object, settings) {
|
||||
setOriginalsObject(object, attrsData);
|
||||
setAttributeIfValue(object, DATA, getData(object, settings.data_src));
|
||||
};
|
||||
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 setImgsetBackground = function setImgsetBackground(element, settings, instance) {
|
||||
var bgImgSetDataValue = getData(element, settings.data_bg_set);
|
||||
|
||||
if (!bgImgSetDataValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
var imgSetValues = bgImgSetDataValue.split("|");
|
||||
var bgImageValues = imgSetValues.map(function (value) {
|
||||
return "image-set(".concat(value, ")");
|
||||
});
|
||||
element.style.backgroundImage = bgImageValues.join(); // Temporary fix for Chromeium with the -webkit- prefix
|
||||
|
||||
if (element.style.backgroundImage === '') {
|
||||
bgImageValues = imgSetValues.map(function (value) {
|
||||
return "-webkit-image-set(".concat(value, ")");
|
||||
});
|
||||
element.style.backgroundImage = bgImageValues.join();
|
||||
}
|
||||
|
||||
manageApplied(element, settings, instance);
|
||||
};
|
||||
var setSourcesFunctions = {
|
||||
IMG: setSourcesImg,
|
||||
IFRAME: setSourcesIframe,
|
||||
VIDEO: setSourcesVideo,
|
||||
OBJECT: setSourcesObject
|
||||
};
|
||||
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", "OBJECT"];
|
||||
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 (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes);
|
||||
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);
|
||||
setImgsetBackground(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 restoreObject = function restoreObject(objectEl) {
|
||||
restoreOriginalAttrs(objectEl, attrsData);
|
||||
};
|
||||
var restoreFunctions = {
|
||||
IMG: restoreImg,
|
||||
IFRAME: restoreIframe,
|
||||
VIDEO: restoreVideo,
|
||||
OBJECT: restoreObject
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
instance._onlineHandler = function () {
|
||||
retryLazyLoad(settings, instance);
|
||||
};
|
||||
|
||||
window.addEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
var resetOnlineCheck = function resetOnlineCheck(instance) {
|
||||
if (!runningOnBrowser) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.removeEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
|
||||
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 handlers
|
||||
|
||||
|
||||
resetOnlineCheck(this); // 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._onlineHandler;
|
||||
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;
|
||||
|
||||
});
|
||||
1
lazyload/v17/dist/lazyload.amd.min.js
vendored
Normal file
1
lazyload/v17/dist/lazyload.amd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
801
lazyload/v17/dist/lazyload.esm.js
vendored
Normal file
801
lazyload/v17/dist/lazyload.esm.js
vendored
Normal file
@ -0,0 +1,801 @@
|
||||
const runningOnBrowser = typeof window !== "undefined";
|
||||
|
||||
const isBot =
|
||||
(runningOnBrowser && !("onscroll" in window)) ||
|
||||
(typeof navigator !== "undefined" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent));
|
||||
|
||||
const supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
|
||||
|
||||
const supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
|
||||
|
||||
const isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;
|
||||
|
||||
const 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_bg_set: "bg-set",
|
||||
data_poster: "poster",
|
||||
class_applied: "applied",
|
||||
class_loading: "loading",
|
||||
class_loaded: "loaded",
|
||||
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,
|
||||
restore_on_error: false,
|
||||
};
|
||||
|
||||
const getExtendedSettings = (customSettings) => {
|
||||
return Object.assign({}, defaultSettings, customSettings);
|
||||
};
|
||||
|
||||
/* Creates instance and notifies it through the window element */
|
||||
const createInstance = function(classObj, options) {
|
||||
let event;
|
||||
const eventString = "LazyLoad::Initialized";
|
||||
const instance = new classObj(options);
|
||||
try {
|
||||
// Works in modern browsers
|
||||
event = new CustomEvent(eventString, { detail: { instance } });
|
||||
} catch (err) {
|
||||
// Works in Internet Explorer (all versions)
|
||||
event = document.createEvent("CustomEvent");
|
||||
event.initCustomEvent(eventString, false, false, { instance });
|
||||
}
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
/* Auto initialization of one or more instances of lazyload, depending on the
|
||||
options passed in (plain object or an array) */
|
||||
const autoInitialize = (classObj, options) => {
|
||||
if (!options) {
|
||||
return;
|
||||
}
|
||||
if (!options.length) {
|
||||
// Plain object
|
||||
createInstance(classObj, options);
|
||||
} else {
|
||||
// Array of objects
|
||||
for (let i = 0, optionsItem; (optionsItem = options[i]); i += 1) {
|
||||
createInstance(classObj, optionsItem);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const SRC = "src";
|
||||
const SRCSET = "srcset";
|
||||
const SIZES = "sizes";
|
||||
const POSTER = "poster";
|
||||
const ORIGINALS = "llOriginalAttrs";
|
||||
const DATA = "data";
|
||||
|
||||
const statusLoading = "loading";
|
||||
const statusLoaded = "loaded";
|
||||
const statusApplied = "applied";
|
||||
const statusEntered = "entered";
|
||||
const statusError = "error";
|
||||
const statusNative = "native";
|
||||
|
||||
const dataPrefix = "data-";
|
||||
const statusDataName = "ll-status";
|
||||
|
||||
const getData = (element, attribute) => {
|
||||
return element.getAttribute(dataPrefix + attribute);
|
||||
};
|
||||
|
||||
const setData = (element, attribute, value) => {
|
||||
var attrName = dataPrefix + attribute;
|
||||
if (value === null) {
|
||||
element.removeAttribute(attrName);
|
||||
return;
|
||||
}
|
||||
element.setAttribute(attrName, value);
|
||||
};
|
||||
|
||||
const getStatus = (element) => getData(element, statusDataName);
|
||||
const setStatus = (element, status) => setData(element, statusDataName, status);
|
||||
const resetStatus = (element) => setStatus(element, null);
|
||||
|
||||
const hasEmptyStatus = (element) => getStatus(element) === null;
|
||||
const hasStatusLoading = (element) => getStatus(element) === statusLoading;
|
||||
const hasStatusError = (element) => getStatus(element) === statusError;
|
||||
const hasStatusNative = (element) => getStatus(element) === statusNative;
|
||||
|
||||
const statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError];
|
||||
const hadStartedLoading = (element) => statusesAfterLoading.indexOf(getStatus(element)) >= 0;
|
||||
|
||||
const 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);
|
||||
};
|
||||
|
||||
const addClass = (element, className) => {
|
||||
if (supportsClassList) {
|
||||
element.classList.add(className);
|
||||
return;
|
||||
}
|
||||
element.className += (element.className ? " " : "") + className;
|
||||
};
|
||||
|
||||
const removeClass = (element, className) => {
|
||||
if (supportsClassList) {
|
||||
element.classList.remove(className);
|
||||
return;
|
||||
}
|
||||
element.className = element.className.
|
||||
replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").
|
||||
replace(/^\s+/, "").
|
||||
replace(/\s+$/, "");
|
||||
};
|
||||
|
||||
const addTempImage = (element) => {
|
||||
element.llTempImage = document.createElement("IMG");
|
||||
};
|
||||
|
||||
const deleteTempImage = (element) => {
|
||||
delete element.llTempImage;
|
||||
};
|
||||
|
||||
const getTempImage = (element) => element.llTempImage;
|
||||
|
||||
const unobserve = (element, instance) => {
|
||||
if (!instance) return;
|
||||
const observer = instance._observer;
|
||||
if (!observer) return;
|
||||
observer.unobserve(element);
|
||||
};
|
||||
|
||||
const resetObserver = (observer) => {
|
||||
observer.disconnect();
|
||||
};
|
||||
|
||||
const unobserveEntered = (element, settings, instance) => {
|
||||
if (settings.unobserve_entered) unobserve(element, instance);
|
||||
};
|
||||
|
||||
const updateLoadingCount = (instance, delta) => {
|
||||
if (!instance) return;
|
||||
instance.loadingCount += delta;
|
||||
};
|
||||
|
||||
const decreaseToLoadCount = (instance) => {
|
||||
if (!instance) return;
|
||||
instance.toLoadCount -= 1;
|
||||
};
|
||||
|
||||
const setToLoadCount = (instance, value) => {
|
||||
if (!instance) return;
|
||||
instance.toLoadCount = value;
|
||||
};
|
||||
|
||||
const isSomethingLoading = (instance) => instance.loadingCount > 0;
|
||||
|
||||
const haveElementsToLoad = (instance) => instance.toLoadCount > 0;
|
||||
|
||||
const getSourceTags = (parentTag) => {
|
||||
let sourceTags = [];
|
||||
for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
|
||||
if (childTag.tagName === "SOURCE") {
|
||||
sourceTags.push(childTag);
|
||||
}
|
||||
}
|
||||
return sourceTags;
|
||||
};
|
||||
|
||||
const forEachPictureSource = (element, fn) => {
|
||||
const parent = element.parentNode;
|
||||
if (!parent || parent.tagName !== "PICTURE") {
|
||||
return;
|
||||
}
|
||||
let sourceTags = getSourceTags(parent);
|
||||
sourceTags.forEach(fn);
|
||||
};
|
||||
|
||||
const forEachVideoSource = (element, fn) => {
|
||||
let sourceTags = getSourceTags(element);
|
||||
sourceTags.forEach(fn);
|
||||
};
|
||||
|
||||
const attrsSrc = [SRC];
|
||||
const attrsSrcPoster = [SRC, POSTER];
|
||||
const attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES];
|
||||
const attrsData = [DATA];
|
||||
|
||||
const hasOriginalAttrs = (element) => !!element[ORIGINALS];
|
||||
const getOriginalAttrs = (element) => element[ORIGINALS];
|
||||
const deleteOriginalAttrs = (element) => delete element[ORIGINALS];
|
||||
|
||||
// ## SAVE ##
|
||||
|
||||
const setOriginalsObject = (element, attributes) => {
|
||||
if (hasOriginalAttrs(element)) {
|
||||
return;
|
||||
}
|
||||
const originals = {};
|
||||
attributes.forEach((attribute) => {
|
||||
originals[attribute] = element.getAttribute(attribute);
|
||||
});
|
||||
element[ORIGINALS] = originals;
|
||||
};
|
||||
|
||||
const saveOriginalBackgroundStyle = (element) => {
|
||||
if (hasOriginalAttrs(element)) {
|
||||
return;
|
||||
}
|
||||
element[ORIGINALS] = { backgroundImage: element.style.backgroundImage };
|
||||
};
|
||||
|
||||
// ## RESTORE ##
|
||||
|
||||
const setOrResetAttribute = (element, attrName, value) => {
|
||||
if (!value) {
|
||||
element.removeAttribute(attrName);
|
||||
return;
|
||||
}
|
||||
element.setAttribute(attrName, value);
|
||||
};
|
||||
|
||||
const restoreOriginalAttrs = (element, attributes) => {
|
||||
if (!hasOriginalAttrs(element)) {
|
||||
return;
|
||||
}
|
||||
const originals = getOriginalAttrs(element);
|
||||
attributes.forEach((attribute) => {
|
||||
setOrResetAttribute(element, attribute, originals[attribute]);
|
||||
});
|
||||
};
|
||||
|
||||
const restoreOriginalBgImage = (element) => {
|
||||
if (!hasOriginalAttrs(element)) {
|
||||
return;
|
||||
}
|
||||
const originals = getOriginalAttrs(element);
|
||||
element.style.backgroundImage = originals.backgroundImage;
|
||||
};
|
||||
|
||||
const 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);
|
||||
};
|
||||
|
||||
const 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);
|
||||
};
|
||||
|
||||
const setAttributeIfValue = (element, attrName, value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
element.setAttribute(attrName, value);
|
||||
};
|
||||
|
||||
const 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));
|
||||
};
|
||||
|
||||
const setSourcesImg = (imgEl, settings) => {
|
||||
forEachPictureSource(imgEl, (sourceTag) => {
|
||||
setOriginalsObject(sourceTag, attrsSrcSrcsetSizes);
|
||||
setImageAttributes(sourceTag, settings);
|
||||
});
|
||||
setOriginalsObject(imgEl, attrsSrcSrcsetSizes);
|
||||
setImageAttributes(imgEl, settings);
|
||||
};
|
||||
|
||||
const setSourcesIframe = (iframe, settings) => {
|
||||
setOriginalsObject(iframe, attrsSrc);
|
||||
setAttributeIfValue(iframe, SRC, getData(iframe, settings.data_src));
|
||||
};
|
||||
|
||||
const setSourcesVideo = (videoEl, settings) => {
|
||||
forEachVideoSource(videoEl, (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();
|
||||
};
|
||||
|
||||
const setSourcesObject = (object, settings) => {
|
||||
setOriginalsObject(object, attrsData);
|
||||
setAttributeIfValue(object, DATA, getData(object, settings.data_src));
|
||||
};
|
||||
|
||||
const setBackground = (element, settings, instance) => {
|
||||
const bg1xValue = getData(element, settings.data_bg);
|
||||
const bgHiDpiValue = getData(element, settings.data_bg_hidpi);
|
||||
const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
|
||||
if (!bgDataValue) return;
|
||||
element.style.backgroundImage = `url("${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
|
||||
const setMultiBackground = (element, settings, instance) => {
|
||||
const bg1xValue = getData(element, settings.data_bg_multi);
|
||||
const bgHiDpiValue = getData(element, settings.data_bg_multi_hidpi);
|
||||
const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
|
||||
if (!bgDataValue) {
|
||||
return;
|
||||
}
|
||||
element.style.backgroundImage = bgDataValue;
|
||||
manageApplied(element, settings, instance);
|
||||
};
|
||||
|
||||
const setImgsetBackground = (element, settings, instance) => {
|
||||
const bgImgSetDataValue = getData(element, settings.data_bg_set);
|
||||
if (!bgImgSetDataValue) {
|
||||
return;
|
||||
}
|
||||
const imgSetValues = bgImgSetDataValue.split("|");
|
||||
let bgImageValues = imgSetValues.map((value) => `image-set(${value})`);
|
||||
element.style.backgroundImage = bgImageValues.join();
|
||||
// Temporary fix for Chromeium with the -webkit- prefix
|
||||
if (element.style.backgroundImage === '') {
|
||||
bgImageValues = imgSetValues.map((value) => `-webkit-image-set(${value})`);
|
||||
element.style.backgroundImage = bgImageValues.join();
|
||||
}
|
||||
manageApplied(element, settings, instance);
|
||||
};
|
||||
|
||||
const setSourcesFunctions = {
|
||||
IMG: setSourcesImg,
|
||||
IFRAME: setSourcesIframe,
|
||||
VIDEO: setSourcesVideo,
|
||||
OBJECT: setSourcesObject
|
||||
};
|
||||
|
||||
const setSourcesNative = (element, settings) => {
|
||||
const setSourcesFunction = setSourcesFunctions[element.tagName];
|
||||
if (!setSourcesFunction) {
|
||||
return;
|
||||
}
|
||||
setSourcesFunction(element, settings);
|
||||
};
|
||||
|
||||
const setSources = (element, settings, instance) => {
|
||||
const setSourcesFunction = setSourcesFunctions[element.tagName];
|
||||
if (!setSourcesFunction) {
|
||||
return;
|
||||
}
|
||||
setSourcesFunction(element, settings);
|
||||
manageLoading(element, settings, instance);
|
||||
};
|
||||
|
||||
const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"];
|
||||
const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1;
|
||||
|
||||
const checkFinish = (settings, instance) => {
|
||||
if (instance && !isSomethingLoading(instance) && !haveElementsToLoad(instance)) {
|
||||
safeCallback(settings.callback_finish, instance);
|
||||
}
|
||||
};
|
||||
|
||||
const addEventListener = (element, eventName, handler) => {
|
||||
element.addEventListener(eventName, handler);
|
||||
element.llEvLisnrs[eventName] = handler;
|
||||
};
|
||||
|
||||
const removeEventListener = (element, eventName, handler) => {
|
||||
element.removeEventListener(eventName, handler);
|
||||
};
|
||||
|
||||
const hasEventListeners = (element) => {
|
||||
return !!element.llEvLisnrs;
|
||||
};
|
||||
|
||||
const addEventListeners = (element, loadHandler, errorHandler) => {
|
||||
if (!hasEventListeners(element)) element.llEvLisnrs = {};
|
||||
const loadEventName = element.tagName === "VIDEO" ? "loadeddata" : "load";
|
||||
addEventListener(element, loadEventName, loadHandler);
|
||||
addEventListener(element, "error", errorHandler);
|
||||
};
|
||||
|
||||
const removeEventListeners = (element) => {
|
||||
if (!hasEventListeners(element)) {
|
||||
return;
|
||||
}
|
||||
const eventListeners = element.llEvLisnrs;
|
||||
for (let eventName in eventListeners) {
|
||||
const handler = eventListeners[eventName];
|
||||
removeEventListener(element, eventName, handler);
|
||||
}
|
||||
delete element.llEvLisnrs;
|
||||
};
|
||||
|
||||
const doneHandler = (element, settings, instance) => {
|
||||
deleteTempImage(element);
|
||||
updateLoadingCount(instance, -1);
|
||||
decreaseToLoadCount(instance);
|
||||
removeClass(element, settings.class_loading);
|
||||
if (settings.unobserve_completed) {
|
||||
unobserve(element, instance);
|
||||
}
|
||||
};
|
||||
|
||||
const loadHandler = (event, element, settings, instance) => {
|
||||
const 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);
|
||||
};
|
||||
|
||||
const errorHandler = (event, element, settings, instance) => {
|
||||
const goingNative = hasStatusNative(element);
|
||||
doneHandler(element, settings, instance);
|
||||
addClass(element, settings.class_error);
|
||||
setStatus(element, statusError);
|
||||
safeCallback(settings.callback_error, element, instance);
|
||||
if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes);
|
||||
if (!goingNative) checkFinish(settings, instance);
|
||||
};
|
||||
|
||||
const addOneShotEventListeners = (element, settings, instance) => {
|
||||
const elementToListenTo = getTempImage(element) || element;
|
||||
if (hasEventListeners(elementToListenTo)) {
|
||||
// This happens when loading is retried twice
|
||||
return;
|
||||
}
|
||||
const _loadHandler = (event) => {
|
||||
loadHandler(event, element, settings, instance);
|
||||
removeEventListeners(elementToListenTo);
|
||||
};
|
||||
const _errorHandler = (event) => {
|
||||
errorHandler(event, element, settings, instance);
|
||||
removeEventListeners(elementToListenTo);
|
||||
};
|
||||
addEventListeners(elementToListenTo, _loadHandler, _errorHandler);
|
||||
};
|
||||
|
||||
const loadBackground = (element, settings, instance) => {
|
||||
addTempImage(element);
|
||||
addOneShotEventListeners(element, settings, instance);
|
||||
saveOriginalBackgroundStyle(element);
|
||||
setBackground(element, settings, instance);
|
||||
setMultiBackground(element, settings, instance);
|
||||
setImgsetBackground(element, settings, instance);
|
||||
};
|
||||
|
||||
const loadRegular = (element, settings, instance) => {
|
||||
addOneShotEventListeners(element, settings, instance);
|
||||
setSources(element, settings, instance);
|
||||
};
|
||||
|
||||
const load = (element, settings, instance) => {
|
||||
if (hasLoadEvent(element)) {
|
||||
loadRegular(element, settings, instance);
|
||||
} else {
|
||||
loadBackground(element, settings, instance);
|
||||
}
|
||||
};
|
||||
|
||||
const loadNative = (element, settings, instance) => {
|
||||
element.setAttribute("loading", "lazy");
|
||||
addOneShotEventListeners(element, settings, instance);
|
||||
setSourcesNative(element, settings);
|
||||
setStatus(element, statusNative);
|
||||
};
|
||||
|
||||
const removeImageAttributes = (element) => {
|
||||
element.removeAttribute(SRC);
|
||||
element.removeAttribute(SRCSET);
|
||||
element.removeAttribute(SIZES);
|
||||
};
|
||||
|
||||
const resetSourcesImg = (element) => {
|
||||
forEachPictureSource(element, (sourceTag) => {
|
||||
removeImageAttributes(sourceTag);
|
||||
});
|
||||
removeImageAttributes(element);
|
||||
};
|
||||
|
||||
const restoreImg = (imgEl) => {
|
||||
forEachPictureSource(imgEl, (sourceEl) => {
|
||||
restoreOriginalAttrs(sourceEl, attrsSrcSrcsetSizes);
|
||||
});
|
||||
restoreOriginalAttrs(imgEl, attrsSrcSrcsetSizes);
|
||||
};
|
||||
|
||||
const restoreVideo = (videoEl) => {
|
||||
forEachVideoSource(videoEl, (sourceEl) => {
|
||||
restoreOriginalAttrs(sourceEl, attrsSrc);
|
||||
});
|
||||
restoreOriginalAttrs(videoEl, attrsSrcPoster);
|
||||
videoEl.load();
|
||||
};
|
||||
|
||||
const restoreIframe = (iframeEl) => {
|
||||
restoreOriginalAttrs(iframeEl, attrsSrc);
|
||||
};
|
||||
|
||||
const restoreObject = (objectEl) => {
|
||||
restoreOriginalAttrs(objectEl, attrsData);
|
||||
};
|
||||
|
||||
const restoreFunctions = {
|
||||
IMG: restoreImg,
|
||||
IFRAME: restoreIframe,
|
||||
VIDEO: restoreVideo,
|
||||
OBJECT: restoreObject
|
||||
};
|
||||
|
||||
const restoreAttributes = (element) => {
|
||||
const restoreFunction = restoreFunctions[element.tagName];
|
||||
if (!restoreFunction) {
|
||||
restoreOriginalBgImage(element);
|
||||
return;
|
||||
}
|
||||
restoreFunction(element);
|
||||
};
|
||||
|
||||
const 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);
|
||||
};
|
||||
|
||||
const restore = (element, settings) => {
|
||||
restoreAttributes(element);
|
||||
resetClasses(element, settings);
|
||||
resetStatus(element);
|
||||
deleteOriginalAttrs(element);
|
||||
};
|
||||
|
||||
const 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);
|
||||
};
|
||||
|
||||
const onEnter = (element, entry, settings, instance) => {
|
||||
const 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);
|
||||
};
|
||||
|
||||
const 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);
|
||||
};
|
||||
|
||||
const tagsWithNativeLazy = ["IMG", "IFRAME", "VIDEO"];
|
||||
|
||||
const shouldUseNative = (settings) =>
|
||||
settings.use_native && "loading" in HTMLImageElement.prototype;
|
||||
|
||||
const loadAllNative = (elements, settings, instance) => {
|
||||
elements.forEach((element) => {
|
||||
if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {
|
||||
return;
|
||||
}
|
||||
loadNative(element, settings, instance);
|
||||
});
|
||||
setToLoadCount(instance, 0);
|
||||
};
|
||||
|
||||
const isIntersecting = (entry) => entry.isIntersecting || entry.intersectionRatio > 0;
|
||||
|
||||
const getObserverSettings = (settings) => ({
|
||||
root: settings.container === document ? null : settings.container,
|
||||
rootMargin: settings.thresholds || settings.threshold + "px"
|
||||
});
|
||||
|
||||
const intersectionHandler = (entries, settings, instance) => {
|
||||
entries.forEach((entry) =>
|
||||
isIntersecting(entry)
|
||||
? onEnter(entry.target, entry, settings, instance)
|
||||
: onExit(entry.target, entry, settings, instance)
|
||||
);
|
||||
};
|
||||
|
||||
const observeElements = (observer, elements) => {
|
||||
elements.forEach((element) => {
|
||||
observer.observe(element);
|
||||
});
|
||||
};
|
||||
|
||||
const updateObserver = (observer, elementsToObserve) => {
|
||||
resetObserver(observer);
|
||||
observeElements(observer, elementsToObserve);
|
||||
};
|
||||
|
||||
const setObserver = (settings, instance) => {
|
||||
if (!supportsIntersectionObserver || shouldUseNative(settings)) {
|
||||
return;
|
||||
}
|
||||
instance._observer = new IntersectionObserver((entries) => {
|
||||
intersectionHandler(entries, settings, instance);
|
||||
}, getObserverSettings(settings));
|
||||
};
|
||||
|
||||
const toArray = (nodeSet) => Array.prototype.slice.call(nodeSet);
|
||||
|
||||
const queryElements = (settings) =>
|
||||
settings.container.querySelectorAll(settings.elements_selector);
|
||||
|
||||
const excludeManagedElements = (elements) => toArray(elements).filter(hasEmptyStatus);
|
||||
|
||||
const hasError = (element) => hasStatusError(element);
|
||||
const filterErrorElements = (elements) => toArray(elements).filter(hasError);
|
||||
|
||||
const getElementsToLoad = (elements, settings) =>
|
||||
excludeManagedElements(elements || queryElements(settings));
|
||||
|
||||
const retryLazyLoad = (settings, instance) => {
|
||||
const errorElements = filterErrorElements(queryElements(settings));
|
||||
errorElements.forEach((element) => {
|
||||
removeClass(element, settings.class_error);
|
||||
resetStatus(element);
|
||||
});
|
||||
instance.update();
|
||||
};
|
||||
|
||||
const setOnlineCheck = (settings, instance) => {
|
||||
if (!runningOnBrowser) {
|
||||
return;
|
||||
}
|
||||
instance._onlineHandler = () => {
|
||||
retryLazyLoad(settings, instance);
|
||||
};
|
||||
window.addEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
|
||||
const resetOnlineCheck = (instance) => {
|
||||
if (!runningOnBrowser) {
|
||||
return;
|
||||
}
|
||||
window.removeEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
|
||||
const LazyLoad = function (customSettings, elements) {
|
||||
const settings = getExtendedSettings(customSettings);
|
||||
this._settings = settings;
|
||||
this.loadingCount = 0;
|
||||
setObserver(settings, this);
|
||||
setOnlineCheck(settings, this);
|
||||
this.update(elements);
|
||||
};
|
||||
|
||||
LazyLoad.prototype = {
|
||||
update: function (givenNodeset) {
|
||||
const settings = this._settings;
|
||||
const 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 () {
|
||||
// Observer
|
||||
if (this._observer) {
|
||||
this._observer.disconnect();
|
||||
}
|
||||
// Clean handlers
|
||||
resetOnlineCheck(this);
|
||||
// Clean custom attributes on elements
|
||||
queryElements(this._settings).forEach((element) => {
|
||||
deleteOriginalAttrs(element);
|
||||
});
|
||||
// Delete all internal props
|
||||
delete this._observer;
|
||||
delete this._settings;
|
||||
delete this._onlineHandler;
|
||||
delete this.loadingCount;
|
||||
delete this.toLoadCount;
|
||||
},
|
||||
|
||||
loadAll: function (elements) {
|
||||
const settings = this._settings;
|
||||
const elementsToLoad = getElementsToLoad(elements, settings);
|
||||
elementsToLoad.forEach((element) => {
|
||||
unobserve(element, this);
|
||||
load(element, settings, this);
|
||||
});
|
||||
},
|
||||
|
||||
restoreAll: function() {
|
||||
const settings = this._settings;
|
||||
queryElements(settings).forEach((element) => {
|
||||
restore(element, settings);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
LazyLoad.load = (element, customSettings) => {
|
||||
const settings = getExtendedSettings(customSettings);
|
||||
load(element, settings);
|
||||
};
|
||||
|
||||
LazyLoad.resetStatus = (element) => {
|
||||
resetStatus(element);
|
||||
};
|
||||
|
||||
// Automatic instances creation if required (useful for async script loading)
|
||||
if (runningOnBrowser) {
|
||||
autoInitialize(LazyLoad, window.lazyLoadOptions);
|
||||
}
|
||||
|
||||
export { LazyLoad as default };
|
||||
1
lazyload/v17/dist/lazyload.esm.min.js
vendored
Normal file
1
lazyload/v17/dist/lazyload.esm.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
859
lazyload/v17/dist/lazyload.iife.js
vendored
Normal file
859
lazyload/v17/dist/lazyload.iife.js
vendored
Normal file
@ -0,0 +1,859 @@
|
||||
var LazyLoad = (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_bg_set: "bg-set",
|
||||
data_poster: "poster",
|
||||
class_applied: "applied",
|
||||
class_loading: "loading",
|
||||
class_loaded: "loaded",
|
||||
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,
|
||||
restore_on_error: 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 DATA = "data";
|
||||
|
||||
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 attrsData = [DATA];
|
||||
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 setSourcesObject = function setSourcesObject(object, settings) {
|
||||
setOriginalsObject(object, attrsData);
|
||||
setAttributeIfValue(object, DATA, getData(object, settings.data_src));
|
||||
};
|
||||
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 setImgsetBackground = function setImgsetBackground(element, settings, instance) {
|
||||
var bgImgSetDataValue = getData(element, settings.data_bg_set);
|
||||
|
||||
if (!bgImgSetDataValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
var imgSetValues = bgImgSetDataValue.split("|");
|
||||
var bgImageValues = imgSetValues.map(function (value) {
|
||||
return "image-set(".concat(value, ")");
|
||||
});
|
||||
element.style.backgroundImage = bgImageValues.join(); // Temporary fix for Chromeium with the -webkit- prefix
|
||||
|
||||
if (element.style.backgroundImage === '') {
|
||||
bgImageValues = imgSetValues.map(function (value) {
|
||||
return "-webkit-image-set(".concat(value, ")");
|
||||
});
|
||||
element.style.backgroundImage = bgImageValues.join();
|
||||
}
|
||||
|
||||
manageApplied(element, settings, instance);
|
||||
};
|
||||
var setSourcesFunctions = {
|
||||
IMG: setSourcesImg,
|
||||
IFRAME: setSourcesIframe,
|
||||
VIDEO: setSourcesVideo,
|
||||
OBJECT: setSourcesObject
|
||||
};
|
||||
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", "OBJECT"];
|
||||
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 (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes);
|
||||
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);
|
||||
setImgsetBackground(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 restoreObject = function restoreObject(objectEl) {
|
||||
restoreOriginalAttrs(objectEl, attrsData);
|
||||
};
|
||||
var restoreFunctions = {
|
||||
IMG: restoreImg,
|
||||
IFRAME: restoreIframe,
|
||||
VIDEO: restoreVideo,
|
||||
OBJECT: restoreObject
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
instance._onlineHandler = function () {
|
||||
retryLazyLoad(settings, instance);
|
||||
};
|
||||
|
||||
window.addEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
var resetOnlineCheck = function resetOnlineCheck(instance) {
|
||||
if (!runningOnBrowser) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.removeEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
|
||||
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 handlers
|
||||
|
||||
|
||||
resetOnlineCheck(this); // 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._onlineHandler;
|
||||
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;
|
||||
|
||||
}());
|
||||
1
lazyload/v17/dist/lazyload.iife.min.js
vendored
Normal file
1
lazyload/v17/dist/lazyload.iife.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
862
lazyload/v17/dist/lazyload.js
vendored
Normal file
862
lazyload/v17/dist/lazyload.js
vendored
Normal file
@ -0,0 +1,862 @@
|
||||
(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_bg_set: "bg-set",
|
||||
data_poster: "poster",
|
||||
class_applied: "applied",
|
||||
class_loading: "loading",
|
||||
class_loaded: "loaded",
|
||||
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,
|
||||
restore_on_error: 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 DATA = "data";
|
||||
|
||||
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 attrsData = [DATA];
|
||||
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 setSourcesObject = function setSourcesObject(object, settings) {
|
||||
setOriginalsObject(object, attrsData);
|
||||
setAttributeIfValue(object, DATA, getData(object, settings.data_src));
|
||||
};
|
||||
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 setImgsetBackground = function setImgsetBackground(element, settings, instance) {
|
||||
var bgImgSetDataValue = getData(element, settings.data_bg_set);
|
||||
|
||||
if (!bgImgSetDataValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
var imgSetValues = bgImgSetDataValue.split("|");
|
||||
var bgImageValues = imgSetValues.map(function (value) {
|
||||
return "image-set(".concat(value, ")");
|
||||
});
|
||||
element.style.backgroundImage = bgImageValues.join(); // Temporary fix for Chromeium with the -webkit- prefix
|
||||
|
||||
if (element.style.backgroundImage === '') {
|
||||
bgImageValues = imgSetValues.map(function (value) {
|
||||
return "-webkit-image-set(".concat(value, ")");
|
||||
});
|
||||
element.style.backgroundImage = bgImageValues.join();
|
||||
}
|
||||
|
||||
manageApplied(element, settings, instance);
|
||||
};
|
||||
var setSourcesFunctions = {
|
||||
IMG: setSourcesImg,
|
||||
IFRAME: setSourcesIframe,
|
||||
VIDEO: setSourcesVideo,
|
||||
OBJECT: setSourcesObject
|
||||
};
|
||||
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", "OBJECT"];
|
||||
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 (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes);
|
||||
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);
|
||||
setImgsetBackground(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 restoreObject = function restoreObject(objectEl) {
|
||||
restoreOriginalAttrs(objectEl, attrsData);
|
||||
};
|
||||
var restoreFunctions = {
|
||||
IMG: restoreImg,
|
||||
IFRAME: restoreIframe,
|
||||
VIDEO: restoreVideo,
|
||||
OBJECT: restoreObject
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
instance._onlineHandler = function () {
|
||||
retryLazyLoad(settings, instance);
|
||||
};
|
||||
|
||||
window.addEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
var resetOnlineCheck = function resetOnlineCheck(instance) {
|
||||
if (!runningOnBrowser) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.removeEventListener("online", instance._onlineHandler);
|
||||
};
|
||||
|
||||
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 handlers
|
||||
|
||||
|
||||
resetOnlineCheck(this); // 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._onlineHandler;
|
||||
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;
|
||||
|
||||
})));
|
||||
1
lazyload/v17/dist/lazyload.min.js
vendored
Normal file
1
lazyload/v17/dist/lazyload.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user