From e43fa9cb02334ce6330054e3c96b31c55d9bcc06 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Tue, 19 Mar 2024 09:25:23 +0100 Subject: [PATCH 1/3] Added ability to pass empty string as class names This is to avoid unneeded DOM modifications Thanks to @stanleyxu2005 --- src/class.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/class.js b/src/class.js index 7e63876..735e015 100644 --- a/src/class.js +++ b/src/class.js @@ -1,6 +1,9 @@ import { supportsClassList } from "./environment"; export const addClass = (element, className) => { + if (className === "") { + return; + } if (supportsClassList) { element.classList.add(className); return; @@ -9,6 +12,9 @@ export const addClass = (element, className) => { }; export const removeClass = (element, className) => { + if (className === "") { + return; + } if (supportsClassList) { element.classList.remove(className); return; From 46e360342183aa5dc68909f5e05ee2e4e45aa900 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Tue, 19 Mar 2024 09:30:01 +0100 Subject: [PATCH 2/3] Added demo to test the no classes case --- demos/image_no_classes.html | 494 ++++++++++++++++++++++++++++++++++++ 1 file changed, 494 insertions(+) create mode 100644 demos/image_no_classes.html diff --git a/demos/image_no_classes.html b/demos/image_no_classes.html new file mode 100644 index 0000000..1b23005 --- /dev/null +++ b/demos/image_no_classes.html @@ -0,0 +1,494 @@ + + + + + + Basic - Lazyload demos + + + + + + +

Basic demo

+
+
    +
  • + Stivaletti +
    • +
  • + Open toe +
    • +
  • + Sneakers & Tennis +
    • +
  • + Sneakers & Tennis shoes basse +
    • +
  • + Sneakers & Tennis shoes alte +
    • +
  • + Sneakers & Tennis shoes alte +
    • +
  • + Sneakers & Tennis shoes basse +
    • +
  • + Sneakers & Tennis shoes basse +
    • +
  • + Stivali +
    • +
  • + Stivali +
    • +
  • + Stivaletti +
    • +
  • + Stivaletti +
    • +
  • + Stivali +
    • +
  • + Stivaletti +
    • +
  • + Décolleté +
    • +
  • + Mocassini +
    • +
  • + Stivaletti +
    • +
  • + Décolleté +
    • +
  • + Décolleté +
    • +
  • + Francesine +
    • +
  • + Stivaletti +
    • +
  • + Décolleté +
    • +
  • + Mocassini +
    • +
  • + Mocassini +
    • +
  • + Stivali +
    • +
  • + Stivaletti +
    • +
  • + Stivaletti +
    • +
  • + Mocassini +
    • +
  • + Stivaletti +
    • +
  • + Stivaletti +
    • +
  • + Stivaletti +
    • +
  • + Stivaletti +
    • +
  • + Cuissardes +
    • +
  • + Décolleté +
    • +
  • + Stivaletti +
    • +
  • + Sneakers & Tennis shoes basse +
    • +
  • + Mocassini +
    • +
  • + Sneakers & Tennis shoes basse +
    • +
  • + Mocassini +
    • +
  • + Mocassini +
    • +
+
+ + + + From 083c95fdd50effe0c8c392f060d1f953a51736a7 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Tue, 19 Mar 2024 15:07:00 +0100 Subject: [PATCH 3/3] Releasing 17.9.0 --- CHANGELOG.md | 4 ++ README.md | 8 +-- dist/lazyload.amd.js | 127 ++++++++++---------------------------- dist/lazyload.amd.min.js | 2 +- dist/lazyload.esm.js | 6 ++ dist/lazyload.esm.min.js | 2 +- dist/lazyload.iife.js | 127 ++++++++++---------------------------- dist/lazyload.iife.min.js | 2 +- dist/lazyload.js | 127 ++++++++++---------------------------- dist/lazyload.min.js | 2 +- package.json | 2 +- 11 files changed, 115 insertions(+), 294 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ccfc53..9a178a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Version 17 +#### 17.9.0 + +- Allowing to pass empty string (`""`) as value for class options (`class_loading`, `class_applied`, `class_loaded`, `class_error`, `class_entered`, `class_exited`) so that no DOM mutation will happen if not necessary. This is a potential performance improvement. Suggested in [#605](https://github.com/verlok/vanilla-lazyload/issues/605). + #### 17.8.8 - Fixed dependency issues detected by `npm audit` diff --git a/README.md b/README.md index 88db322..010be8d 100644 --- a/README.md +++ b/README.md @@ -175,7 +175,7 @@ Please note that the video poster can be lazily loaded too. ## 👩‍💻 Getting started - Script -The latest, recommended version of LazyLoad is **17.8.8**. +The latest, recommended version of LazyLoad is **17.9.0**. Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md). @@ -184,7 +184,7 @@ Quickly understand how to upgrade from a previous version reading the [practical The easiest way to use LazyLoad is to include the script from a CDN: ```html - + ``` Then, in your javascript code: @@ -225,7 +225,7 @@ Then include the script. ```html ``` @@ -259,7 +259,7 @@ Then include the script. ```html ``` diff --git a/dist/lazyload.amd.js b/dist/lazyload.amd.js index c915ef3..f9680ad 100644 --- a/dist/lazyload.amd.js +++ b/dist/lazyload.amd.js @@ -4,17 +4,14 @@ define(function () { 'use strict'; _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); } @@ -67,7 +64,6 @@ define(function () { 'use strict'; var event; var eventString = "LazyLoad::Initialized"; var instance = new classObj(options); - try { // Works in modern browsers event = new CustomEvent(eventString, { @@ -82,18 +78,15 @@ define(function () { 'use strict'; 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); @@ -126,12 +119,10 @@ define(function () { 'use strict'; }; 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) { @@ -164,34 +155,35 @@ define(function () { 'use strict'; if (!callback || typeof callback !== 'function') { 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 (className === "") { + return; + } if (supportsClassList) { element.classList.add(className); return; } - element.className += (element.className ? " " : "") + className; }; var removeClass = function removeClass(element, className) { + if (className === "") { + return; + } if (supportsClassList) { element.classList.remove(className); return; } - element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, ""); }; @@ -239,23 +231,18 @@ define(function () { 'use strict'; 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); }; @@ -276,13 +263,14 @@ define(function () { 'use strict'; }; var deleteOriginalAttrs = function deleteOriginalAttrs(element) { return delete element[ORIGINALS]; - }; // ## SAVE ## + }; + + // ## SAVE ## var setOriginalsObject = function setOriginalsObject(element, attributes) { if (hasOriginalAttrs(element)) { return; } - var originals = {}; attributes.forEach(function (attribute) { originals[attribute] = element.getAttribute(attribute); @@ -293,26 +281,24 @@ define(function () { 'use strict'; if (hasOriginalAttrs(element)) { return; } - element[ORIGINALS] = { backgroundImage: element.style.backgroundImage }; - }; // ## RESTORE ## + }; + + // ## 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]); @@ -322,28 +308,25 @@ define(function () { 'use strict'; 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 - + 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 - + 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); @@ -352,7 +335,6 @@ define(function () { 'use strict'; if (!value) { return; } - element.setAttribute(attrName, value); }; var setImageAttributes = function setImageAttributes(element, settings) { @@ -394,42 +376,38 @@ define(function () { 'use strict'; 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 + }; + + // 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 - + 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 = { @@ -440,20 +418,16 @@ define(function () { 'use strict'; }; 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); }; @@ -487,14 +461,11 @@ define(function () { 'use strict'; 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) { @@ -502,7 +473,6 @@ define(function () { 'use strict'; updateLoadingCount(instance, -1); decreaseToLoadCount(instance); removeClass(element, settings.class_loading); - if (settings.unobserve_completed) { unobserve(element, instance); } @@ -526,22 +496,18 @@ define(function () { 'use strict'; }; 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); }; @@ -553,12 +519,10 @@ define(function () { 'use strict'; 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); @@ -578,7 +542,6 @@ define(function () { 'use strict'; element.removeAttribute(SRCSET); element.removeAttribute(SIZES); }; - var resetSourcesImg = function resetSourcesImg(element) { forEachPictureSource(element, function (sourceTag) { removeImageAttributes(sourceTag); @@ -611,23 +574,18 @@ define(function () { 'use strict'; 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); @@ -635,7 +593,6 @@ define(function () { 'use strict'; removeClass(element, settings.class_loaded); removeClass(element, settings.class_error); }; - var restore = function restore(element, settings) { restoreAttributes(element); resetClasses(element, settings); @@ -647,7 +604,6 @@ define(function () { 'use strict'; 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); @@ -658,10 +614,8 @@ define(function () { 'use strict'; }; var onEnter = function onEnter(element, entry, settings, instance) { - var dontLoad = hadStartedLoading(element); - /* Save status - before setting it, to prevent loading it again. Fixes #526. */ - + 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); @@ -672,7 +626,6 @@ define(function () { 'use strict'; }; 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); @@ -687,7 +640,6 @@ define(function () { 'use strict'; if (tagsWithNativeLazy.indexOf(element.tagName) === -1) { return; } - loadNative(element, settings, instance); }); setToLoadCount(instance, 0); @@ -696,20 +648,17 @@ define(function () { 'use strict'; 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); @@ -723,7 +672,6 @@ define(function () { 'use strict'; if (!supportsIntersectionObserver || shouldUseNative(settings)) { return; } - instance._observer = new IntersectionObserver(function (entries) { intersectionHandler(entries, settings, instance); }, getObserverSettings(settings)); @@ -760,18 +708,15 @@ define(function () { 'use strict'; 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); }; @@ -783,38 +728,33 @@ define(function () { 'use strict'; 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 - + } + // Clean handlers + resetOnlineCheck(this); + // Clean custom attributes on elements queryElements(this._settings).forEach(function (element) { deleteOriginalAttrs(element); - }); // Delete all internal props - + }); + // Delete all internal props delete this._observer; delete this._settings; delete this._onlineHandler; @@ -823,7 +763,6 @@ define(function () { 'use strict'; }, loadAll: function loadAll(elements) { var _this = this; - var settings = this._settings; var elementsToLoad = getElementsToLoad(elements, settings); elementsToLoad.forEach(function (element) { @@ -838,17 +777,15 @@ define(function () { 'use strict'; }); } }; - 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) - + }; + // Automatic instances creation if required (useful for async script loading) if (runningOnBrowser) { autoInitialize(LazyLoad, window.lazyLoadOptions); } diff --git a/dist/lazyload.amd.min.js b/dist/lazyload.amd.min.js index 7164db4..3b5e26c 100644 --- a/dist/lazyload.amd.min.js +++ b/dist/lazyload.amd.min.js @@ -1 +1 @@ -define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},c=function(t){return n({},r,t)},l=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},u="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",m="applied",p="error",h="native",E="data-",I="ll-status",k=function(n,t){return n.getAttribute(E+t)},y=function(n){return k(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},A=function(n){return w(n,null)},L=function(n){return null===y(n)},O=function(n){return y(n)===h},C=[v,b,m,p],x=function(n,t,e,i){n&&"function"==typeof n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},H=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},V=function(n,t){D(n).forEach(t)},j=[u],F=[u,f],B=[u,s,d],J=[g],P=function(n){return!!n[_]},S=function(n){return n[_]},U=function(n){return delete n[_]},$=function(n,t){if(!P(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},q=function(n,t){if(P(n)){var e=S(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_applied),w(n,m),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,k(n,t.data_sizes)),W(n,s,k(n,t.data_srcset)),W(n,u,k(n,t.data_src))},Y={IMG:function(n,t){H(n,(function(n){$(n,B),X(n,t)})),$(n,B),X(n,t)},IFRAME:function(n,t){$(n,j),W(n,u,k(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){$(n,j),W(n,u,k(n,t.data_src))})),$(n,F),W(n,f,k(n,t.data_poster)),W(n,u,k(n,t.data_src)),n.load()},OBJECT:function(n,t){$(n,J),W(n,g,k(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},on=function(n){return!!n.llEvLisnrs},an=function(n){if(on(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];en(n,e,i)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},cn=function(n,t,e){var i=z(n)||n;on(i)||function(n,t,e){on(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";tn(n,i,t),tn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_loaded),w(t,b),x(e.callback_loaded,t,i),o||nn(e,i)}(0,n,t,e),an(i)}),(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_error),w(t,p),x(e.callback_error,t,i),e.restore_on_error&&q(t,B),o||nn(e,i)}(0,n,t,e),an(i)}))},ln=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){P(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=k(n,t.data_bg),o=k(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(u,r),Q(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_multi),o=k(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_set);if(i){var o=i.split("|"),a=o.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=a.join(),""===n.style.backgroundImage&&(a=o.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=a.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var i=Y[n.tagName];i&&(i(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},un=function(n){n.removeAttribute(u),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){H(n,(function(n){q(n,B)})),q(n,B)},dn={IMG:sn,IFRAME:function(n){q(n,j)},VIDEO:function(n){V(n,(function(n){q(n,j)})),q(n,F),n.load()},OBJECT:function(n){q(n,J)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(P(n)){var t=S(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),A(n),U(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(y(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||ln(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===v}(n)&&"IMG"===n.tagName&&(an(n),function(n){H(n,(function(n){un(n)})),un(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),A(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},mn=function(n){return n.container.querySelectorAll(n.elements_selector)},pn=function(n){return function(n){return y(n)===p}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||mn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&(e._onlineHandler=function(){!function(n,t){var e;(e=mn(n),bn(e).filter(pn)).forEach((function(t){M(t,n.class_error),A(t)})),t.update()}(n,e)},window.addEventListener("online",e._onlineHandler))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=hn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),w(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),t&&window.removeEventListener("online",this._onlineHandler),mn(this._settings).forEach((function(n){U(n)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;hn(n,e).forEach((function(n){R(n,t),ln(n,e,t)}))},restoreAll:function(){var n=this._settings;mn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);ln(n,e)},En.resetStatus=function(n){A(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(En,window.lazyLoadOptions),En})); +define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},c=function(t){return n({},r,t)},l=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},u="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",m="applied",p="error",h="native",E="data-",I="ll-status",k=function(n,t){return n.getAttribute(E+t)},y=function(n){return k(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},A=function(n){return w(n,null)},L=function(n){return null===y(n)},O=function(n){return y(n)===h},C=[v,b,m,p],x=function(n,t,e,i){n&&"function"==typeof n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){""!==t&&(o?n.classList.add(t):n.className+=(n.className?" ":"")+t)},M=function(n,t){""!==t&&(o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},H=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},V=function(n,t){D(n).forEach(t)},j=[u],F=[u,f],B=[u,s,d],J=[g],P=function(n){return!!n[_]},S=function(n){return n[_]},U=function(n){return delete n[_]},$=function(n,t){if(!P(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},q=function(n,t){if(P(n)){var e=S(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_applied),w(n,m),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,k(n,t.data_sizes)),W(n,s,k(n,t.data_srcset)),W(n,u,k(n,t.data_src))},Y={IMG:function(n,t){H(n,(function(n){$(n,B),X(n,t)})),$(n,B),X(n,t)},IFRAME:function(n,t){$(n,j),W(n,u,k(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){$(n,j),W(n,u,k(n,t.data_src))})),$(n,F),W(n,f,k(n,t.data_poster)),W(n,u,k(n,t.data_src)),n.load()},OBJECT:function(n,t){$(n,J),W(n,g,k(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},on=function(n){return!!n.llEvLisnrs},an=function(n){if(on(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];en(n,e,i)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},cn=function(n,t,e){var i=z(n)||n;on(i)||function(n,t,e){on(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";tn(n,i,t),tn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_loaded),w(t,b),x(e.callback_loaded,t,i),o||nn(e,i)}(0,n,t,e),an(i)}),(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_error),w(t,p),x(e.callback_error,t,i),e.restore_on_error&&q(t,B),o||nn(e,i)}(0,n,t,e),an(i)}))},ln=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){P(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=k(n,t.data_bg),o=k(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(u,r),Q(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_multi),o=k(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_set);if(i){var o=i.split("|"),a=o.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=a.join(),""===n.style.backgroundImage&&(a=o.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=a.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var i=Y[n.tagName];i&&(i(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},un=function(n){n.removeAttribute(u),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){H(n,(function(n){q(n,B)})),q(n,B)},dn={IMG:sn,IFRAME:function(n){q(n,j)},VIDEO:function(n){V(n,(function(n){q(n,j)})),q(n,F),n.load()},OBJECT:function(n){q(n,J)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(P(n)){var t=S(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),A(n),U(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(y(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||ln(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===v}(n)&&"IMG"===n.tagName&&(an(n),function(n){H(n,(function(n){un(n)})),un(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),A(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},mn=function(n){return n.container.querySelectorAll(n.elements_selector)},pn=function(n){return function(n){return y(n)===p}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||mn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&(e._onlineHandler=function(){!function(n,t){var e;(e=mn(n),bn(e).filter(pn)).forEach((function(t){M(t,n.class_error),A(t)})),t.update()}(n,e)},window.addEventListener("online",e._onlineHandler))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=hn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),w(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),t&&window.removeEventListener("online",this._onlineHandler),mn(this._settings).forEach((function(n){U(n)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;hn(n,e).forEach((function(n){R(n,t),ln(n,e,t)}))},restoreAll:function(){var n=this._settings;mn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);ln(n,e)},En.resetStatus=function(n){A(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(En,window.lazyLoadOptions),En})); diff --git a/dist/lazyload.esm.js b/dist/lazyload.esm.js index 29c5ce8..1b540c0 100644 --- a/dist/lazyload.esm.js +++ b/dist/lazyload.esm.js @@ -140,6 +140,9 @@ const safeCallback = (callback, arg1, arg2, arg3) => { }; const addClass = (element, className) => { + if (className === "") { + return; + } if (supportsClassList) { element.classList.add(className); return; @@ -148,6 +151,9 @@ const addClass = (element, className) => { }; const removeClass = (element, className) => { + if (className === "") { + return; + } if (supportsClassList) { element.classList.remove(className); return; diff --git a/dist/lazyload.esm.min.js b/dist/lazyload.esm.min.js index 7880189..d1ff533 100644 --- a/dist/lazyload.esm.min.js +++ b/dist/lazyload.esm.min.js @@ -1 +1 @@ -const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,s=e&&"classList"in document.createElement("p"),l=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},o=e=>Object.assign({},n,e),r=function(e,t){let a;const s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},i="src",c="llOriginalAttrs",d=(e,t)=>e.getAttribute("data-"+t),_=e=>d(e,"ll-status"),u=(e,t)=>((e,t,a)=>{const s="data-ll-status";null!==a?e.setAttribute(s,a):e.removeAttribute(s)})(e,0,t),g=e=>u(e,null),b=e=>null===_(e),m=e=>"native"===_(e),p=["loading","loaded","applied","error"],h=(e,t,a,s)=>{e&&"function"==typeof e&&(void 0===s?void 0===a?e(t):e(t,a):e(t,a,s))},v=(e,t)=>{s?e.classList.add(t):e.className+=(e.className?" ":"")+t},E=(e,t)=>{s?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},f=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},k=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},w=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},y=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&w(a).forEach(t)},L=(e,t)=>{w(e).forEach(t)},O=[i],x=[i,"poster"],C=[i,"srcset","sizes"],N=["data"],M=e=>!!e[c],z=e=>e[c],R=e=>delete e[c],T=(e,t)=>{if(M(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[c]=a},G=(e,t)=>{if(!M(e))return;const a=z(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},D=(e,t,a)=>{v(e,t.class_applied),u(e,"applied"),a&&(t.unobserve_completed&&I(e,t),h(t.callback_applied,e,a))},H=(e,t,a)=>{v(e,t.class_loading),u(e,"loading"),a&&(k(a,1),h(t.callback_loading,e,a))},V=(e,t,a)=>{a&&e.setAttribute(t,a)},$=(e,t)=>{V(e,"sizes",d(e,t.data_sizes)),V(e,"srcset",d(e,t.data_srcset)),V(e,i,d(e,t.data_src))},F={IMG:(e,t)=>{y(e,(e=>{T(e,C),$(e,t)})),T(e,C),$(e,t)},IFRAME:(e,t)=>{T(e,O),V(e,i,d(e,t.data_src))},VIDEO:(e,t)=>{L(e,(e=>{T(e,O),V(e,i,d(e,t.data_src))})),T(e,x),V(e,"poster",d(e,t.data_poster)),V(e,i,d(e,t.data_src)),e.load()},OBJECT:(e,t)=>{T(e,N),V(e,"data",d(e,t.data_src))}},j=["IMG","IFRAME","VIDEO","OBJECT"],B=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},J=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},S=(e,t,a)=>{e.removeEventListener(t,a)},P=e=>!!e.llEvLisnrs,U=e=>{if(!P(e))return;const t=e.llEvLisnrs;for(let a in t){const s=t[a];S(e,a,s)}delete e.llEvLisnrs},q=(e,t,a)=>{(e=>{delete e.llTempImage})(e),k(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),E(e,t.class_loading),t.unobserve_completed&&I(e,a)},K=(e,t,a)=>{const s=f(e)||e;P(s)||((e,t,a)=>{P(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";J(e,s,t),J(e,"error",a)})(s,(l=>{((e,t,a,s)=>{const l=m(t);q(t,a,s),v(t,a.class_loaded),u(t,"loaded"),h(a.callback_loaded,t,s),l||B(a,s)})(0,e,t,a),U(s)}),(l=>{((e,t,a,s)=>{const l=m(t);q(t,a,s),v(t,a.class_error),u(t,"error"),h(a.callback_error,t,s),a.restore_on_error&&G(t,C),l||B(a,s)})(0,e,t,a),U(s)}))},Q=(e,t,a)=>{(e=>j.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{K(e,t,a),((e,t,a)=>{const s=F[e.tagName];s&&(s(e,t),H(e,t,a))})(e,t,a)})(e,t,a):((e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),K(e,t,a),(e=>{M(e)||(e[c]={backgroundImage:e.style.backgroundImage})})(e),((e,t,a)=>{const s=d(e,t.data_bg),n=d(e,t.data_bg_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=`url("${o}")`,f(e).setAttribute(i,o),H(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_multi),n=d(e,t.data_bg_multi_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=o,D(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_set);if(!s)return;const l=s.split("|");let n=l.map((e=>`image-set(${e})`));e.style.backgroundImage=n.join(),""===e.style.backgroundImage&&(n=l.map((e=>`-webkit-image-set(${e})`)),e.style.backgroundImage=n.join()),D(e,t,a)})(e,t,a)})(e,t,a)},W=e=>{e.removeAttribute(i),e.removeAttribute("srcset"),e.removeAttribute("sizes")},X=e=>{y(e,(e=>{G(e,C)})),G(e,C)},Y={IMG:X,IFRAME:e=>{G(e,O)},VIDEO:e=>{L(e,(e=>{G(e,O)})),G(e,x),e.load()},OBJECT:e=>{G(e,N)}},Z=(e,t)=>{(e=>{const t=Y[e.tagName];t?t(e):(e=>{if(!M(e))return;const t=z(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{b(e)||m(e)||(E(e,t.class_entered),E(e,t.class_exited),E(e,t.class_applied),E(e,t.class_loading),E(e,t.class_loaded),E(e,t.class_error))})(e,t),g(e),R(e)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,ae=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{const l=(e=>p.indexOf(_(e))>=0)(e);u(e,"entered"),v(e,a.class_entered),E(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&I(e,a)})(e,a,s),h(a.callback_enter,e,t,s),l||Q(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{b(e)||(v(e,a.class_exited),((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===_(e))(e)&&"IMG"===e.tagName&&(U(e),(e=>{y(e,(e=>{W(e)})),W(e)})(e),X(e),E(e,a.class_loading),k(s,-1),g(e),h(a.callback_cancel,e,t,s))})(e,t,a,s),h(a.callback_exit,e,t,s))})(e.target,e,t,a)))},se=e=>Array.prototype.slice.call(e),le=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===_(e))(e),oe=(e,t)=>(e=>se(e).filter(b))(e||le(t)),re=function(t,s){const l=o(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!te(e)&&(t._observer=new IntersectionObserver((a=>{ae(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&(a._onlineHandler=()=>{((e,t)=>{var a;(a=le(e),se(a).filter(ne)).forEach((t=>{E(t,e.class_error),g(t)})),t.update()})(t,a)},window.addEventListener("online",a._onlineHandler))})(l,this),this.update(s)};re.prototype={update:function(e){const s=this._settings,l=oe(e,s);var n,o;A(this,l.length),!t&&a?te(s)?((e,t,a)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),K(e,t,a),((e,t)=>{const a=F[e.tagName];a&&a(e,t)})(e,t),u(e,"native")})(e,t,a)})),A(a,0)})(l,s,this):(o=l,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(n,o)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),e&&window.removeEventListener("online",this._onlineHandler),le(this._settings).forEach((e=>{R(e)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;oe(e,t).forEach((e=>{I(e,this),Q(e,t,this)}))},restoreAll:function(){const e=this._settings;le(e).forEach((t=>{Z(t,e)}))}},re.load=(e,t)=>{const a=o(t);Q(e,a)},re.resetStatus=e=>{g(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,s=0;a=t[s];s+=1)r(e,a);else r(e,t)})(re,window.lazyLoadOptions);export{re as default}; +const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,s=e&&"classList"in document.createElement("p"),l=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},o=e=>Object.assign({},n,e),r=function(e,t){let a;const s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},i="src",c="llOriginalAttrs",d=(e,t)=>e.getAttribute("data-"+t),_=e=>d(e,"ll-status"),u=(e,t)=>((e,t,a)=>{const s="data-ll-status";null!==a?e.setAttribute(s,a):e.removeAttribute(s)})(e,0,t),g=e=>u(e,null),b=e=>null===_(e),m=e=>"native"===_(e),p=["loading","loaded","applied","error"],h=(e,t,a,s)=>{e&&"function"==typeof e&&(void 0===s?void 0===a?e(t):e(t,a):e(t,a,s))},v=(e,t)=>{""!==t&&(s?e.classList.add(t):e.className+=(e.className?" ":"")+t)},E=(e,t)=>{""!==t&&(s?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))},f=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},k=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},w=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},y=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&w(a).forEach(t)},L=(e,t)=>{w(e).forEach(t)},O=[i],x=[i,"poster"],C=[i,"srcset","sizes"],N=["data"],M=e=>!!e[c],z=e=>e[c],R=e=>delete e[c],T=(e,t)=>{if(M(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[c]=a},G=(e,t)=>{if(!M(e))return;const a=z(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},D=(e,t,a)=>{v(e,t.class_applied),u(e,"applied"),a&&(t.unobserve_completed&&I(e,t),h(t.callback_applied,e,a))},H=(e,t,a)=>{v(e,t.class_loading),u(e,"loading"),a&&(k(a,1),h(t.callback_loading,e,a))},V=(e,t,a)=>{a&&e.setAttribute(t,a)},$=(e,t)=>{V(e,"sizes",d(e,t.data_sizes)),V(e,"srcset",d(e,t.data_srcset)),V(e,i,d(e,t.data_src))},F={IMG:(e,t)=>{y(e,(e=>{T(e,C),$(e,t)})),T(e,C),$(e,t)},IFRAME:(e,t)=>{T(e,O),V(e,i,d(e,t.data_src))},VIDEO:(e,t)=>{L(e,(e=>{T(e,O),V(e,i,d(e,t.data_src))})),T(e,x),V(e,"poster",d(e,t.data_poster)),V(e,i,d(e,t.data_src)),e.load()},OBJECT:(e,t)=>{T(e,N),V(e,"data",d(e,t.data_src))}},j=["IMG","IFRAME","VIDEO","OBJECT"],B=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},J=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},S=(e,t,a)=>{e.removeEventListener(t,a)},P=e=>!!e.llEvLisnrs,U=e=>{if(!P(e))return;const t=e.llEvLisnrs;for(let a in t){const s=t[a];S(e,a,s)}delete e.llEvLisnrs},q=(e,t,a)=>{(e=>{delete e.llTempImage})(e),k(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),E(e,t.class_loading),t.unobserve_completed&&I(e,a)},K=(e,t,a)=>{const s=f(e)||e;P(s)||((e,t,a)=>{P(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";J(e,s,t),J(e,"error",a)})(s,(l=>{((e,t,a,s)=>{const l=m(t);q(t,a,s),v(t,a.class_loaded),u(t,"loaded"),h(a.callback_loaded,t,s),l||B(a,s)})(0,e,t,a),U(s)}),(l=>{((e,t,a,s)=>{const l=m(t);q(t,a,s),v(t,a.class_error),u(t,"error"),h(a.callback_error,t,s),a.restore_on_error&&G(t,C),l||B(a,s)})(0,e,t,a),U(s)}))},Q=(e,t,a)=>{(e=>j.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{K(e,t,a),((e,t,a)=>{const s=F[e.tagName];s&&(s(e,t),H(e,t,a))})(e,t,a)})(e,t,a):((e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),K(e,t,a),(e=>{M(e)||(e[c]={backgroundImage:e.style.backgroundImage})})(e),((e,t,a)=>{const s=d(e,t.data_bg),n=d(e,t.data_bg_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=`url("${o}")`,f(e).setAttribute(i,o),H(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_multi),n=d(e,t.data_bg_multi_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=o,D(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_set);if(!s)return;const l=s.split("|");let n=l.map((e=>`image-set(${e})`));e.style.backgroundImage=n.join(),""===e.style.backgroundImage&&(n=l.map((e=>`-webkit-image-set(${e})`)),e.style.backgroundImage=n.join()),D(e,t,a)})(e,t,a)})(e,t,a)},W=e=>{e.removeAttribute(i),e.removeAttribute("srcset"),e.removeAttribute("sizes")},X=e=>{y(e,(e=>{G(e,C)})),G(e,C)},Y={IMG:X,IFRAME:e=>{G(e,O)},VIDEO:e=>{L(e,(e=>{G(e,O)})),G(e,x),e.load()},OBJECT:e=>{G(e,N)}},Z=(e,t)=>{(e=>{const t=Y[e.tagName];t?t(e):(e=>{if(!M(e))return;const t=z(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{b(e)||m(e)||(E(e,t.class_entered),E(e,t.class_exited),E(e,t.class_applied),E(e,t.class_loading),E(e,t.class_loaded),E(e,t.class_error))})(e,t),g(e),R(e)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,ae=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{const l=(e=>p.indexOf(_(e))>=0)(e);u(e,"entered"),v(e,a.class_entered),E(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&I(e,a)})(e,a,s),h(a.callback_enter,e,t,s),l||Q(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{b(e)||(v(e,a.class_exited),((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===_(e))(e)&&"IMG"===e.tagName&&(U(e),(e=>{y(e,(e=>{W(e)})),W(e)})(e),X(e),E(e,a.class_loading),k(s,-1),g(e),h(a.callback_cancel,e,t,s))})(e,t,a,s),h(a.callback_exit,e,t,s))})(e.target,e,t,a)))},se=e=>Array.prototype.slice.call(e),le=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===_(e))(e),oe=(e,t)=>(e=>se(e).filter(b))(e||le(t)),re=function(t,s){const l=o(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!te(e)&&(t._observer=new IntersectionObserver((a=>{ae(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&(a._onlineHandler=()=>{((e,t)=>{var a;(a=le(e),se(a).filter(ne)).forEach((t=>{E(t,e.class_error),g(t)})),t.update()})(t,a)},window.addEventListener("online",a._onlineHandler))})(l,this),this.update(s)};re.prototype={update:function(e){const s=this._settings,l=oe(e,s);var n,o;A(this,l.length),!t&&a?te(s)?((e,t,a)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),K(e,t,a),((e,t)=>{const a=F[e.tagName];a&&a(e,t)})(e,t),u(e,"native")})(e,t,a)})),A(a,0)})(l,s,this):(o=l,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(n,o)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),e&&window.removeEventListener("online",this._onlineHandler),le(this._settings).forEach((e=>{R(e)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;oe(e,t).forEach((e=>{I(e,this),Q(e,t,this)}))},restoreAll:function(){const e=this._settings;le(e).forEach((t=>{Z(t,e)}))}},re.load=(e,t)=>{const a=o(t);Q(e,a)},re.resetStatus=e=>{g(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,s=0;a=t[s];s+=1)r(e,a);else r(e,t)})(re,window.lazyLoadOptions);export{re as default}; diff --git a/dist/lazyload.iife.js b/dist/lazyload.iife.js index bfb3243..15c8471 100644 --- a/dist/lazyload.iife.js +++ b/dist/lazyload.iife.js @@ -5,17 +5,14 @@ var LazyLoad = (function () { _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); } @@ -68,7 +65,6 @@ var LazyLoad = (function () { var event; var eventString = "LazyLoad::Initialized"; var instance = new classObj(options); - try { // Works in modern browsers event = new CustomEvent(eventString, { @@ -83,18 +79,15 @@ var LazyLoad = (function () { 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); @@ -127,12 +120,10 @@ var LazyLoad = (function () { }; 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) { @@ -165,34 +156,35 @@ var LazyLoad = (function () { if (!callback || typeof callback !== 'function') { 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 (className === "") { + return; + } if (supportsClassList) { element.classList.add(className); return; } - element.className += (element.className ? " " : "") + className; }; var removeClass = function removeClass(element, className) { + if (className === "") { + return; + } if (supportsClassList) { element.classList.remove(className); return; } - element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, ""); }; @@ -240,23 +232,18 @@ var LazyLoad = (function () { 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); }; @@ -277,13 +264,14 @@ var LazyLoad = (function () { }; var deleteOriginalAttrs = function deleteOriginalAttrs(element) { return delete element[ORIGINALS]; - }; // ## SAVE ## + }; + + // ## SAVE ## var setOriginalsObject = function setOriginalsObject(element, attributes) { if (hasOriginalAttrs(element)) { return; } - var originals = {}; attributes.forEach(function (attribute) { originals[attribute] = element.getAttribute(attribute); @@ -294,26 +282,24 @@ var LazyLoad = (function () { if (hasOriginalAttrs(element)) { return; } - element[ORIGINALS] = { backgroundImage: element.style.backgroundImage }; - }; // ## RESTORE ## + }; + + // ## 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]); @@ -323,28 +309,25 @@ var LazyLoad = (function () { 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 - + 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 - + 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); @@ -353,7 +336,6 @@ var LazyLoad = (function () { if (!value) { return; } - element.setAttribute(attrName, value); }; var setImageAttributes = function setImageAttributes(element, settings) { @@ -395,42 +377,38 @@ var LazyLoad = (function () { 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 + }; + + // 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 - + 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 = { @@ -441,20 +419,16 @@ var LazyLoad = (function () { }; 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); }; @@ -488,14 +462,11 @@ var LazyLoad = (function () { 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) { @@ -503,7 +474,6 @@ var LazyLoad = (function () { updateLoadingCount(instance, -1); decreaseToLoadCount(instance); removeClass(element, settings.class_loading); - if (settings.unobserve_completed) { unobserve(element, instance); } @@ -527,22 +497,18 @@ var LazyLoad = (function () { }; 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); }; @@ -554,12 +520,10 @@ var LazyLoad = (function () { 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); @@ -579,7 +543,6 @@ var LazyLoad = (function () { element.removeAttribute(SRCSET); element.removeAttribute(SIZES); }; - var resetSourcesImg = function resetSourcesImg(element) { forEachPictureSource(element, function (sourceTag) { removeImageAttributes(sourceTag); @@ -612,23 +575,18 @@ var LazyLoad = (function () { 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); @@ -636,7 +594,6 @@ var LazyLoad = (function () { removeClass(element, settings.class_loaded); removeClass(element, settings.class_error); }; - var restore = function restore(element, settings) { restoreAttributes(element); resetClasses(element, settings); @@ -648,7 +605,6 @@ var LazyLoad = (function () { 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); @@ -659,10 +615,8 @@ var LazyLoad = (function () { }; var onEnter = function onEnter(element, entry, settings, instance) { - var dontLoad = hadStartedLoading(element); - /* Save status - before setting it, to prevent loading it again. Fixes #526. */ - + 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); @@ -673,7 +627,6 @@ var LazyLoad = (function () { }; 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); @@ -688,7 +641,6 @@ var LazyLoad = (function () { if (tagsWithNativeLazy.indexOf(element.tagName) === -1) { return; } - loadNative(element, settings, instance); }); setToLoadCount(instance, 0); @@ -697,20 +649,17 @@ var LazyLoad = (function () { 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); @@ -724,7 +673,6 @@ var LazyLoad = (function () { if (!supportsIntersectionObserver || shouldUseNative(settings)) { return; } - instance._observer = new IntersectionObserver(function (entries) { intersectionHandler(entries, settings, instance); }, getObserverSettings(settings)); @@ -761,18 +709,15 @@ var LazyLoad = (function () { 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); }; @@ -784,38 +729,33 @@ var LazyLoad = (function () { 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 - + } + // Clean handlers + resetOnlineCheck(this); + // Clean custom attributes on elements queryElements(this._settings).forEach(function (element) { deleteOriginalAttrs(element); - }); // Delete all internal props - + }); + // Delete all internal props delete this._observer; delete this._settings; delete this._onlineHandler; @@ -824,7 +764,6 @@ var LazyLoad = (function () { }, loadAll: function loadAll(elements) { var _this = this; - var settings = this._settings; var elementsToLoad = getElementsToLoad(elements, settings); elementsToLoad.forEach(function (element) { @@ -839,17 +778,15 @@ var LazyLoad = (function () { }); } }; - 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) - + }; + // Automatic instances creation if required (useful for async script loading) if (runningOnBrowser) { autoInitialize(LazyLoad, window.lazyLoadOptions); } diff --git a/dist/lazyload.iife.min.js b/dist/lazyload.iife.min.js index d213a6f..21410e0 100644 --- a/dist/lazyload.iife.min.js +++ b/dist/lazyload.iife.min.js @@ -1 +1 @@ -var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},c=function(t){return n({},r,t)},l=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},u="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",m="applied",p="error",h="native",E="data-",I="ll-status",k=function(n,t){return n.getAttribute(E+t)},y=function(n){return k(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},A=function(n){return w(n,null)},L=function(n){return null===y(n)},O=function(n){return y(n)===h},C=[v,b,m,p],x=function(n,t,e,i){n&&"function"==typeof n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},H=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},V=function(n,t){D(n).forEach(t)},j=[u],F=[u,f],B=[u,s,d],J=[g],P=function(n){return!!n[_]},S=function(n){return n[_]},U=function(n){return delete n[_]},$=function(n,t){if(!P(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},q=function(n,t){if(P(n)){var e=S(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_applied),w(n,m),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,k(n,t.data_sizes)),W(n,s,k(n,t.data_srcset)),W(n,u,k(n,t.data_src))},Y={IMG:function(n,t){H(n,(function(n){$(n,B),X(n,t)})),$(n,B),X(n,t)},IFRAME:function(n,t){$(n,j),W(n,u,k(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){$(n,j),W(n,u,k(n,t.data_src))})),$(n,F),W(n,f,k(n,t.data_poster)),W(n,u,k(n,t.data_src)),n.load()},OBJECT:function(n,t){$(n,J),W(n,g,k(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},on=function(n){return!!n.llEvLisnrs},an=function(n){if(on(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];en(n,e,i)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},cn=function(n,t,e){var i=z(n)||n;on(i)||function(n,t,e){on(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";tn(n,i,t),tn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_loaded),w(t,b),x(e.callback_loaded,t,i),o||nn(e,i)}(0,n,t,e),an(i)}),(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_error),w(t,p),x(e.callback_error,t,i),e.restore_on_error&&q(t,B),o||nn(e,i)}(0,n,t,e),an(i)}))},ln=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){P(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=k(n,t.data_bg),o=k(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(u,r),Q(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_multi),o=k(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_set);if(i){var o=i.split("|"),a=o.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=a.join(),""===n.style.backgroundImage&&(a=o.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=a.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var i=Y[n.tagName];i&&(i(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},un=function(n){n.removeAttribute(u),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){H(n,(function(n){q(n,B)})),q(n,B)},dn={IMG:sn,IFRAME:function(n){q(n,j)},VIDEO:function(n){V(n,(function(n){q(n,j)})),q(n,F),n.load()},OBJECT:function(n){q(n,J)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(P(n)){var t=S(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),A(n),U(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(y(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||ln(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===v}(n)&&"IMG"===n.tagName&&(an(n),function(n){H(n,(function(n){un(n)})),un(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),A(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},mn=function(n){return n.container.querySelectorAll(n.elements_selector)},pn=function(n){return function(n){return y(n)===p}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||mn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&(e._onlineHandler=function(){!function(n,t){var e;(e=mn(n),bn(e).filter(pn)).forEach((function(t){M(t,n.class_error),A(t)})),t.update()}(n,e)},window.addEventListener("online",e._onlineHandler))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=hn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),w(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),t&&window.removeEventListener("online",this._onlineHandler),mn(this._settings).forEach((function(n){U(n)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;hn(n,e).forEach((function(n){R(n,t),ln(n,e,t)}))},restoreAll:function(){var n=this._settings;mn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);ln(n,e)},En.resetStatus=function(n){A(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(En,window.lazyLoadOptions),En}(); +var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},c=function(t){return n({},r,t)},l=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},u="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",m="applied",p="error",h="native",E="data-",I="ll-status",k=function(n,t){return n.getAttribute(E+t)},y=function(n){return k(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},A=function(n){return w(n,null)},L=function(n){return null===y(n)},O=function(n){return y(n)===h},C=[v,b,m,p],x=function(n,t,e,i){n&&"function"==typeof n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){""!==t&&(o?n.classList.add(t):n.className+=(n.className?" ":"")+t)},M=function(n,t){""!==t&&(o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},H=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},V=function(n,t){D(n).forEach(t)},j=[u],F=[u,f],B=[u,s,d],J=[g],P=function(n){return!!n[_]},S=function(n){return n[_]},U=function(n){return delete n[_]},$=function(n,t){if(!P(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},q=function(n,t){if(P(n)){var e=S(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_applied),w(n,m),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,k(n,t.data_sizes)),W(n,s,k(n,t.data_srcset)),W(n,u,k(n,t.data_src))},Y={IMG:function(n,t){H(n,(function(n){$(n,B),X(n,t)})),$(n,B),X(n,t)},IFRAME:function(n,t){$(n,j),W(n,u,k(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){$(n,j),W(n,u,k(n,t.data_src))})),$(n,F),W(n,f,k(n,t.data_poster)),W(n,u,k(n,t.data_src)),n.load()},OBJECT:function(n,t){$(n,J),W(n,g,k(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},on=function(n){return!!n.llEvLisnrs},an=function(n){if(on(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];en(n,e,i)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},cn=function(n,t,e){var i=z(n)||n;on(i)||function(n,t,e){on(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";tn(n,i,t),tn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_loaded),w(t,b),x(e.callback_loaded,t,i),o||nn(e,i)}(0,n,t,e),an(i)}),(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_error),w(t,p),x(e.callback_error,t,i),e.restore_on_error&&q(t,B),o||nn(e,i)}(0,n,t,e),an(i)}))},ln=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){P(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=k(n,t.data_bg),o=k(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(u,r),Q(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_multi),o=k(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_set);if(i){var o=i.split("|"),a=o.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=a.join(),""===n.style.backgroundImage&&(a=o.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=a.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var i=Y[n.tagName];i&&(i(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},un=function(n){n.removeAttribute(u),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){H(n,(function(n){q(n,B)})),q(n,B)},dn={IMG:sn,IFRAME:function(n){q(n,j)},VIDEO:function(n){V(n,(function(n){q(n,j)})),q(n,F),n.load()},OBJECT:function(n){q(n,J)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(P(n)){var t=S(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),A(n),U(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(y(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||ln(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===v}(n)&&"IMG"===n.tagName&&(an(n),function(n){H(n,(function(n){un(n)})),un(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),A(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},mn=function(n){return n.container.querySelectorAll(n.elements_selector)},pn=function(n){return function(n){return y(n)===p}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||mn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&(e._onlineHandler=function(){!function(n,t){var e;(e=mn(n),bn(e).filter(pn)).forEach((function(t){M(t,n.class_error),A(t)})),t.update()}(n,e)},window.addEventListener("online",e._onlineHandler))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=hn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),w(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),t&&window.removeEventListener("online",this._onlineHandler),mn(this._settings).forEach((function(n){U(n)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;hn(n,e).forEach((function(n){R(n,t),ln(n,e,t)}))},restoreAll:function(){var n=this._settings;mn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);ln(n,e)},En.resetStatus=function(n){A(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(En,window.lazyLoadOptions),En}(); diff --git a/dist/lazyload.js b/dist/lazyload.js index 3b0a8d4..076bdec 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -8,17 +8,14 @@ _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); } @@ -71,7 +68,6 @@ var event; var eventString = "LazyLoad::Initialized"; var instance = new classObj(options); - try { // Works in modern browsers event = new CustomEvent(eventString, { @@ -86,18 +82,15 @@ 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); @@ -130,12 +123,10 @@ }; 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) { @@ -168,34 +159,35 @@ if (!callback || typeof callback !== 'function') { 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 (className === "") { + return; + } if (supportsClassList) { element.classList.add(className); return; } - element.className += (element.className ? " " : "") + className; }; var removeClass = function removeClass(element, className) { + if (className === "") { + return; + } if (supportsClassList) { element.classList.remove(className); return; } - element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, ""); }; @@ -243,23 +235,18 @@ 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); }; @@ -280,13 +267,14 @@ }; var deleteOriginalAttrs = function deleteOriginalAttrs(element) { return delete element[ORIGINALS]; - }; // ## SAVE ## + }; + + // ## SAVE ## var setOriginalsObject = function setOriginalsObject(element, attributes) { if (hasOriginalAttrs(element)) { return; } - var originals = {}; attributes.forEach(function (attribute) { originals[attribute] = element.getAttribute(attribute); @@ -297,26 +285,24 @@ if (hasOriginalAttrs(element)) { return; } - element[ORIGINALS] = { backgroundImage: element.style.backgroundImage }; - }; // ## RESTORE ## + }; + + // ## 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]); @@ -326,28 +312,25 @@ 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 - + 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 - + 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); @@ -356,7 +339,6 @@ if (!value) { return; } - element.setAttribute(attrName, value); }; var setImageAttributes = function setImageAttributes(element, settings) { @@ -398,42 +380,38 @@ 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 + }; + + // 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 - + 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 = { @@ -444,20 +422,16 @@ }; 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); }; @@ -491,14 +465,11 @@ 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) { @@ -506,7 +477,6 @@ updateLoadingCount(instance, -1); decreaseToLoadCount(instance); removeClass(element, settings.class_loading); - if (settings.unobserve_completed) { unobserve(element, instance); } @@ -530,22 +500,18 @@ }; 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); }; @@ -557,12 +523,10 @@ 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); @@ -582,7 +546,6 @@ element.removeAttribute(SRCSET); element.removeAttribute(SIZES); }; - var resetSourcesImg = function resetSourcesImg(element) { forEachPictureSource(element, function (sourceTag) { removeImageAttributes(sourceTag); @@ -615,23 +578,18 @@ 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); @@ -639,7 +597,6 @@ removeClass(element, settings.class_loaded); removeClass(element, settings.class_error); }; - var restore = function restore(element, settings) { restoreAttributes(element); resetClasses(element, settings); @@ -651,7 +608,6 @@ 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); @@ -662,10 +618,8 @@ }; var onEnter = function onEnter(element, entry, settings, instance) { - var dontLoad = hadStartedLoading(element); - /* Save status - before setting it, to prevent loading it again. Fixes #526. */ - + 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); @@ -676,7 +630,6 @@ }; 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); @@ -691,7 +644,6 @@ if (tagsWithNativeLazy.indexOf(element.tagName) === -1) { return; } - loadNative(element, settings, instance); }); setToLoadCount(instance, 0); @@ -700,20 +652,17 @@ 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); @@ -727,7 +676,6 @@ if (!supportsIntersectionObserver || shouldUseNative(settings)) { return; } - instance._observer = new IntersectionObserver(function (entries) { intersectionHandler(entries, settings, instance); }, getObserverSettings(settings)); @@ -764,18 +712,15 @@ 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); }; @@ -787,38 +732,33 @@ 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 - + } + // Clean handlers + resetOnlineCheck(this); + // Clean custom attributes on elements queryElements(this._settings).forEach(function (element) { deleteOriginalAttrs(element); - }); // Delete all internal props - + }); + // Delete all internal props delete this._observer; delete this._settings; delete this._onlineHandler; @@ -827,7 +767,6 @@ }, loadAll: function loadAll(elements) { var _this = this; - var settings = this._settings; var elementsToLoad = getElementsToLoad(elements, settings); elementsToLoad.forEach(function (element) { @@ -842,17 +781,15 @@ }); } }; - 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) - + }; + // Automatic instances creation if required (useful for async script loading) if (runningOnBrowser) { autoInitialize(LazyLoad, window.lazyLoadOptions); } diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index 089c400..2b04f0c 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},c=function(t){return n({},r,t)},l=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},u="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",m="error",h="native",E="data-",I="ll-status",y=function(n,t){return n.getAttribute(E+t)},k=function(n){return y(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},A=function(n){return w(n,null)},L=function(n){return null===k(n)},O=function(n){return k(n)===h},x=[v,b,p,m],C=function(n,t,e,i){n&&"function"==typeof n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},T=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},j=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&j(e).forEach(t)},H=function(n,t){j(n).forEach(t)},V=[u],F=[u,f],B=[u,s,d],J=[g],P=function(n){return!!n[_]},S=function(n){return n[_]},U=function(n){return delete n[_]},$=function(n,t){if(!P(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},q=function(n,t){if(P(n)){var e=S(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_applied),w(n,p),e&&(t.unobserve_completed&&T(n,t),C(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(R(e,1),C(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,y(n,t.data_sizes)),W(n,s,y(n,t.data_srcset)),W(n,u,y(n,t.data_src))},Y={IMG:function(n,t){D(n,(function(n){$(n,B),X(n,t)})),$(n,B),X(n,t)},IFRAME:function(n,t){$(n,V),W(n,u,y(n,t.data_src))},VIDEO:function(n,t){H(n,(function(n){$(n,V),W(n,u,y(n,t.data_src))})),$(n,F),W(n,f,y(n,t.data_poster)),W(n,u,y(n,t.data_src)),n.load()},OBJECT:function(n,t){$(n,J),W(n,g,y(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||C(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},on=function(n){return!!n.llEvLisnrs},an=function(n){if(on(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];en(n,e,i)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&T(n,e)},cn=function(n,t,e){var i=z(n)||n;on(i)||function(n,t,e){on(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";tn(n,i,t),tn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_loaded),w(t,b),C(e.callback_loaded,t,i),o||nn(e,i)}(0,n,t,e),an(i)}),(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_error),w(t,m),C(e.callback_error,t,i),e.restore_on_error&&q(t,B),o||nn(e,i)}(0,n,t,e),an(i)}))},ln=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){P(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=y(n,t.data_bg),o=y(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(u,r),Q(n,t,e))}(n,t,e),function(n,t,e){var i=y(n,t.data_bg_multi),o=y(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var i=y(n,t.data_bg_set);if(i){var o=i.split("|"),a=o.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=a.join(),""===n.style.backgroundImage&&(a=o.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=a.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var i=Y[n.tagName];i&&(i(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},un=function(n){n.removeAttribute(u),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){D(n,(function(n){q(n,B)})),q(n,B)},dn={IMG:sn,IFRAME:function(n){q(n,V)},VIDEO:function(n){H(n,(function(n){q(n,V)})),q(n,F),n.load()},OBJECT:function(n){q(n,J)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(P(n)){var t=S(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),A(n),U(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(k(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&T(n,e)}(n,e,i),C(e.callback_enter,n,t,i),o||ln(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===v}(n)&&"IMG"===n.tagName&&(an(n),function(n){D(n,(function(n){un(n)})),un(n)}(n),sn(n),M(n,e.class_loading),R(i,-1),A(n),C(e.callback_cancel,n,t,i))}(n,t,e,i),C(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},mn=function(n){return function(n){return k(n)===m}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&(e._onlineHandler=function(){!function(n,t){var e;(e=pn(n),bn(e).filter(mn)).forEach((function(t){M(t,n.class_error),A(t)})),t.update()}(n,e)},window.addEventListener("online",e._onlineHandler))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=hn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),w(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),t&&window.removeEventListener("online",this._onlineHandler),pn(this._settings).forEach((function(n){U(n)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;hn(n,e).forEach((function(n){T(n,t),ln(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);ln(n,e)},En.resetStatus=function(n){A(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(En,window.lazyLoadOptions),En})); +!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?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:!0,unobserve_entered:!1,cancel_on_exit:!0,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:!1,restore_on_error:!1},c=function(t){return n({},r,t)},l=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},u="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",m="error",h="native",E="data-",I="ll-status",y=function(n,t){return n.getAttribute(E+t)},k=function(n){return y(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},A=function(n){return w(n,null)},L=function(n){return null===k(n)},O=function(n){return k(n)===h},x=[v,b,p,m],C=function(n,t,e,i){n&&"function"==typeof n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){""!==t&&(o?n.classList.add(t):n.className+=(n.className?" ":"")+t)},M=function(n,t){""!==t&&(o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))},z=function(n){return n.llTempImage},T=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},j=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&j(e).forEach(t)},H=function(n,t){j(n).forEach(t)},V=[u],F=[u,f],B=[u,s,d],J=[g],P=function(n){return!!n[_]},S=function(n){return n[_]},U=function(n){return delete n[_]},$=function(n,t){if(!P(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},q=function(n,t){if(P(n)){var e=S(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_applied),w(n,p),e&&(t.unobserve_completed&&T(n,t),C(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(R(e,1),C(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,y(n,t.data_sizes)),W(n,s,y(n,t.data_srcset)),W(n,u,y(n,t.data_src))},Y={IMG:function(n,t){D(n,(function(n){$(n,B),X(n,t)})),$(n,B),X(n,t)},IFRAME:function(n,t){$(n,V),W(n,u,y(n,t.data_src))},VIDEO:function(n,t){H(n,(function(n){$(n,V),W(n,u,y(n,t.data_src))})),$(n,F),W(n,f,y(n,t.data_poster)),W(n,u,y(n,t.data_src)),n.load()},OBJECT:function(n,t){$(n,J),W(n,g,y(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||C(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},on=function(n){return!!n.llEvLisnrs},an=function(n){if(on(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];en(n,e,i)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&T(n,e)},cn=function(n,t,e){var i=z(n)||n;on(i)||function(n,t,e){on(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";tn(n,i,t),tn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_loaded),w(t,b),C(e.callback_loaded,t,i),o||nn(e,i)}(0,n,t,e),an(i)}),(function(o){!function(n,t,e,i){var o=O(t);rn(t,e,i),N(t,e.class_error),w(t,m),C(e.callback_error,t,i),e.restore_on_error&&q(t,B),o||nn(e,i)}(0,n,t,e),an(i)}))},ln=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){P(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=y(n,t.data_bg),o=y(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(u,r),Q(n,t,e))}(n,t,e),function(n,t,e){var i=y(n,t.data_bg_multi),o=y(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var i=y(n,t.data_bg_set);if(i){var o=i.split("|"),a=o.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=a.join(),""===n.style.backgroundImage&&(a=o.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=a.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var i=Y[n.tagName];i&&(i(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},un=function(n){n.removeAttribute(u),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){D(n,(function(n){q(n,B)})),q(n,B)},dn={IMG:sn,IFRAME:function(n){q(n,V)},VIDEO:function(n){H(n,(function(n){q(n,V)})),q(n,F),n.load()},OBJECT:function(n){q(n,J)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(P(n)){var t=S(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),A(n),U(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(k(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&T(n,e)}(n,e,i),C(e.callback_enter,n,t,i),o||ln(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===v}(n)&&"IMG"===n.tagName&&(an(n),function(n){D(n,(function(n){un(n)})),un(n)}(n),sn(n),M(n,e.class_loading),R(i,-1),A(n),C(e.callback_cancel,n,t,i))}(n,t,e,i),C(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},mn=function(n){return function(n){return k(n)===m}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&(e._onlineHandler=function(){!function(n,t){var e;(e=pn(n),bn(e).filter(mn)).forEach((function(t){M(t,n.class_error),A(t)})),t.update()}(n,e)},window.addEventListener("online",e._onlineHandler))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=hn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),w(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),t&&window.removeEventListener("online",this._onlineHandler),pn(this._settings).forEach((function(n){U(n)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;hn(n,e).forEach((function(n){T(n,t),ln(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);ln(n,e)},En.resetStatus=function(n){A(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)l(n,e);else l(n,t)}(En,window.lazyLoadOptions),En})); diff --git a/package.json b/package.json index bade39a..61e08d6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-lazyload", - "version": "17.8.8", + "version": "17.9.0", "description": "LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \"vanilla\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading.", "main": "dist/lazyload.min.js", "module": "dist/lazyload.esm.js",