From cc2df3f77bdaaded8b289b14e1b1410efd751fdb Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Mon, 23 Nov 2020 15:14:36 +0100 Subject: [PATCH 1/8] Suggested fix --- src/lazyload.event.js | 2 +- todo.md | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lazyload.event.js b/src/lazyload.event.js index d05596c7..c6f28358 100644 --- a/src/lazyload.event.js +++ b/src/lazyload.event.js @@ -68,7 +68,7 @@ export const loadHandler = (event, element, settings, instance) => { doneHandler(element, settings, instance); addClass(element, settings.class_loaded); setStatus(element, statusLoaded); - removeDataAttributes(element, settings); + removeDataAttributes(element, settings); //This causes the bug with a second instance safeCallback(settings.callback_loaded, element, instance); if (!goingNative) checkFinish(settings, instance); }; diff --git a/todo.md b/todo.md index 2fb4f779..a9e10eae 100644 --- a/todo.md +++ b/todo.md @@ -1,5 +1,10 @@ # TODO +## Solve the bug + +- removing the line `removeDataAttributes` from `onLoaded` makes it work with double instance +- @albertonarda suggests to keep removing the data attributes on load, but putting them back into the data-attributes when cancel loading has effect + ## Coming next - Check how LazyLoad behaves when a page was updated using DOM morphing. From 16dc5b3f3be8358f9a94358f9364cac208db6fa4 Mon Sep 17 00:00:00 2001 From: verlok Date: Mon, 23 Nov 2020 21:53:40 +0100 Subject: [PATCH 2/8] Added prettier config --- .prettierrc | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..3e93a3bb --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "tabWidth": 4, + "useTabs": false, + "printWidth": 100, + "trailingComma": "none" +} From 78515cd8376c589b227e498545271e0bd5582e92 Mon Sep 17 00:00:00 2001 From: verlok Date: Mon, 23 Nov 2020 22:00:56 +0100 Subject: [PATCH 3/8] Applying @albertonarda's suggestion to bring values back to data when canceling download after exit --- src/lazyload.cancelOnExit.js | 9 +++++++-- src/lazyload.data.js | 10 ++++++++-- src/lazyload.setSources.js | 12 ++++++++++++ 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/lazyload.cancelOnExit.js b/src/lazyload.cancelOnExit.js index 042d4856..76529e00 100644 --- a/src/lazyload.cancelOnExit.js +++ b/src/lazyload.cancelOnExit.js @@ -1,5 +1,9 @@ import { removeEventListeners } from "./lazyload.event"; -import { resetSourcesImg, restoreOriginalAttributesImg } from "./lazyload.setSources"; +import { + resetSourcesImg, + copySourcesToDataImg, + restoreOriginalAttributesImg +} from "./lazyload.setSources"; import { safeCallback } from "./lazyload.callback"; import { removeClass } from "./lazyload.class"; import { updateLoadingCount } from "./lazyload.counters"; @@ -10,7 +14,8 @@ export const cancelLoading = (element, entry, settings, instance) => { if (!hasStatusLoading(element)) return; if (element.tagName !== "IMG") return; //Works only on images removeEventListeners(element); - resetSourcesImg(element, settings, instance); + copySourcesToDataImg(element, settings); + resetSourcesImg(element); restoreOriginalAttributesImg(element); removeClass(element, settings.class_loading); updateLoadingCount(instance, -1); diff --git a/src/lazyload.data.js b/src/lazyload.data.js index 18e55c15..c8705b5e 100644 --- a/src/lazyload.data.js +++ b/src/lazyload.data.js @@ -1,4 +1,10 @@ -import { statusError, statusLoading, statusApplied, statusNative, statusLoaded } from "./lazyload.elementStatus"; +import { + statusError, + statusLoading, + statusApplied, + statusNative, + statusLoaded +} from "./lazyload.elementStatus"; const dataPrefix = "data-"; const statusDataName = "ll-status"; @@ -26,4 +32,4 @@ export const hasStatusError = (element) => getStatus(element) === statusError; export const hasStatusNative = (element) => getStatus(element) === statusNative; const statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError]; -export const hadStartedLoading = (element) => (statusesAfterLoading.indexOf(getStatus(element)) >= 0); +export const hadStartedLoading = (element) => statusesAfterLoading.indexOf(getStatus(element)) >= 0; diff --git a/src/lazyload.setSources.js b/src/lazyload.setSources.js index f5cf8e26..abe7b99a 100644 --- a/src/lazyload.setSources.js +++ b/src/lazyload.setSources.js @@ -232,3 +232,15 @@ export const removeDataAttributes = (element, settings) => { } removeDataBackground(element, settings); }; + +// COPY ATTRIBUTES BACK TO DATA + +export const copySourcesToDataImg = (element, settings) => { + setData(element, settings.data_src, element.getAttribute("src")); + setData(element, settings.data_srcset, element.getAttribute("srcset")); + setData(element, settings.data_sizes, element.getAttribute("sizes")); + forEachPictureSource(element, (sourceTag) => { + setData(sourceTag, settings.data_srcset, sourceTag.getAttribute("srcset")); + setData(sourceTag, settings.data_sizes, sourceTag.getAttribute("sizes")); + }); +}; From 702980fa024709665fd5f605777cefe64c55deee Mon Sep 17 00:00:00 2001 From: verlok Date: Mon, 23 Nov 2020 22:10:00 +0100 Subject: [PATCH 4/8] Removed the remove data functions and functionality --- src/lazyload.cancelOnExit.js | 7 +--- src/lazyload.event.js | 2 -- src/lazyload.load.js | 2 -- src/lazyload.setSources.js | 62 ------------------------------------ 4 files changed, 1 insertion(+), 72 deletions(-) diff --git a/src/lazyload.cancelOnExit.js b/src/lazyload.cancelOnExit.js index 76529e00..43285ac0 100644 --- a/src/lazyload.cancelOnExit.js +++ b/src/lazyload.cancelOnExit.js @@ -1,9 +1,5 @@ import { removeEventListeners } from "./lazyload.event"; -import { - resetSourcesImg, - copySourcesToDataImg, - restoreOriginalAttributesImg -} from "./lazyload.setSources"; +import { resetSourcesImg, restoreOriginalAttributesImg } from "./lazyload.setSources"; import { safeCallback } from "./lazyload.callback"; import { removeClass } from "./lazyload.class"; import { updateLoadingCount } from "./lazyload.counters"; @@ -14,7 +10,6 @@ export const cancelLoading = (element, entry, settings, instance) => { if (!hasStatusLoading(element)) return; if (element.tagName !== "IMG") return; //Works only on images removeEventListeners(element); - copySourcesToDataImg(element, settings); resetSourcesImg(element); restoreOriginalAttributesImg(element); removeClass(element, settings.class_loading); diff --git a/src/lazyload.event.js b/src/lazyload.event.js index c6f28358..d9f9f3b3 100644 --- a/src/lazyload.event.js +++ b/src/lazyload.event.js @@ -10,7 +10,6 @@ import { haveElementsToLoad, isSomethingLoading } from "./lazyload.counters"; -import { removeDataAttributes } from "./lazyload.setSources"; const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; export const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1; @@ -68,7 +67,6 @@ export const loadHandler = (event, element, settings, instance) => { doneHandler(element, settings, instance); addClass(element, settings.class_loaded); setStatus(element, statusLoaded); - removeDataAttributes(element, settings); //This causes the bug with a second instance safeCallback(settings.callback_loaded, element, instance); if (!goingNative) checkFinish(settings, instance); }; diff --git a/src/lazyload.load.js b/src/lazyload.load.js index 2a2e57e4..ab7f2d2f 100644 --- a/src/lazyload.load.js +++ b/src/lazyload.load.js @@ -2,7 +2,6 @@ import { setSources, setBackground, setMultiBackground, - removeDataAttributes, manageLoading } from "./lazyload.setSources"; import { setStatus } from "./lazyload.data"; @@ -34,6 +33,5 @@ export const load = (element, settings, instance) => { export const loadNative = (element, settings, instance) => { addOneShotEventListeners(element, settings, instance); setSources(element, settings, instance); - removeDataAttributes(element, settings); setStatus(element, statusNative); }; diff --git a/src/lazyload.setSources.js b/src/lazyload.setSources.js index abe7b99a..3ee45111 100644 --- a/src/lazyload.setSources.js +++ b/src/lazyload.setSources.js @@ -169,7 +169,6 @@ export const setSources = (element, settings) => { export const manageApplied = (element, settings, instance) => { addClass(element, settings.class_applied); setStatus(element, statusApplied); - removeDataMultiBackground(element, settings); if (settings.unobserve_completed) { // Unobserve now because we can't do it on load unobserve(element, settings, instance); @@ -183,64 +182,3 @@ export const manageLoading = (element, settings, instance) => { setStatus(element, statusLoading); safeCallback(settings.callback_loading, element, instance); }; - -// REMOVE DATA ATTRIBUTES -------------- - -export const removeDataImg = (element, settings) => { - setData(element, settings.data_src, null); - setData(element, settings.data_srcset, null); - setData(element, settings.data_sizes, null); - forEachPictureSource(element, (sourceTag) => { - setData(sourceTag, settings.data_srcset, null); - setData(sourceTag, settings.data_sizes, null); - }); -}; - -export const removeDataIframe = (element, settings) => { - setData(element, settings.data_src, null); -}; - -export const removeDataVideo = (element, settings) => { - setData(element, settings.data_src, null); - setData(element, settings.data_poster, null); - forEachVideoSource(element, (sourceTag) => { - setData(sourceTag, settings.data_src, null); - }); -}; - -const removeDataFunctions = { - IMG: removeDataImg, - IFRAME: removeDataIframe, - VIDEO: removeDataVideo -}; - -export const removeDataBackground = (element, settings) => { - setData(element, settings.data_bg, null); - setData(element, settings.data_bg_hidpi, null); -}; - -export const removeDataMultiBackground = (element, settings) => { - setData(element, settings.data_bg_multi, null); - setData(element, settings.data_bg_multi_hidpi, null); -}; - -export const removeDataAttributes = (element, settings) => { - const removeDataFunction = removeDataFunctions[element.tagName]; - if (removeDataFunction) { - removeDataFunction(element, settings); - return; - } - removeDataBackground(element, settings); -}; - -// COPY ATTRIBUTES BACK TO DATA - -export const copySourcesToDataImg = (element, settings) => { - setData(element, settings.data_src, element.getAttribute("src")); - setData(element, settings.data_srcset, element.getAttribute("srcset")); - setData(element, settings.data_sizes, element.getAttribute("sizes")); - forEachPictureSource(element, (sourceTag) => { - setData(sourceTag, settings.data_srcset, sourceTag.getAttribute("srcset")); - setData(sourceTag, settings.data_sizes, sourceTag.getAttribute("sizes")); - }); -}; From 1f6d2e3690e231142cec67c4055443ff0c2a8355 Mon Sep 17 00:00:00 2001 From: verlok Date: Mon, 23 Nov 2020 22:18:44 +0100 Subject: [PATCH 5/8] Removed 2 items from todo --- todo.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/todo.md b/todo.md index a9e10eae..2fb4f779 100644 --- a/todo.md +++ b/todo.md @@ -1,10 +1,5 @@ # TODO -## Solve the bug - -- removing the line `removeDataAttributes` from `onLoaded` makes it work with double instance -- @albertonarda suggests to keep removing the data attributes on load, but putting them back into the data-attributes when cancel loading has effect - ## Coming next - Check how LazyLoad behaves when a page was updated using DOM morphing. From 67d0a76f574afd4d9e62b474b44cc2b48d733d62 Mon Sep 17 00:00:00 2001 From: verlok Date: Mon, 23 Nov 2020 22:25:38 +0100 Subject: [PATCH 6/8] Fix prettier with standard tabWidth 2, JS override to 4 --- .prettierrc | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/.prettierrc b/.prettierrc index 3e93a3bb..f339e652 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,14 @@ { - "tabWidth": 4, - "useTabs": false, - "printWidth": 100, - "trailingComma": "none" + "tabWidth": 2, + "useTabs": false, + "printWidth": 100, + "trailingComma": "none", + "overrides": [ + { + "files": "*.js", + "options": { + "tabWidth": 4 + } + } + ] } From 35dd818cb2ef45e573c3418efc2380e02347d4e3 Mon Sep 17 00:00:00 2001 From: verlok Date: Mon, 23 Nov 2020 22:40:05 +0100 Subject: [PATCH 7/8] Fix prettier with standard tabWidth 2, JS override to 4 --- .prettierrc | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/.prettierrc b/.prettierrc index 3e93a3bb..f339e652 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,14 @@ { - "tabWidth": 4, - "useTabs": false, - "printWidth": 100, - "trailingComma": "none" + "tabWidth": 2, + "useTabs": false, + "printWidth": 100, + "trailingComma": "none", + "overrides": [ + { + "files": "*.js", + "options": { + "tabWidth": 4 + } + } + ] } From a9c44580b980de1d0181559812be7d415491899c Mon Sep 17 00:00:00 2001 From: verlok Date: Mon, 23 Nov 2020 22:43:07 +0100 Subject: [PATCH 8/8] Releasing 17.2.0 --- CHANGELOG.md | 4 ++ README.md | 12 ++-- dist/lazyload.amd.js | 46 -------------- dist/lazyload.amd.min.js | 2 +- dist/lazyload.esm.js | 54 +--------------- dist/lazyload.esm.min.js | 2 +- dist/lazyload.iife.js | 46 -------------- dist/lazyload.iife.min.js | 2 +- dist/lazyload.js | 46 -------------- dist/lazyload.min.js | 2 +- package-lock.json | 8 +-- package.json | 126 +++++++++++++++++++------------------- 12 files changed, 82 insertions(+), 268 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b19d7d9d..d67061e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Version 17 +#### 17.2.0 + +- Rolling back the "`data` attribute cleanup" feature that was released on 16.1.0 and was causing issues like [#484](https://github.com/verlok/vanilla-lazyload/issues/484) when more than one instance of LazyLoad were working on the same elements of the page - the script is also 500 bytes lighter now + #### 17.1.3 - Added missing types (#480), thanks to @ar53n (#482) diff --git a/README.md b/README.md index 0cb205f5..86081b81 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ Please note that the video poster can be lazily loaded too. ## 👩‍💻 Getting started - Script -The latest, recommended version of LazyLoad is **17.1.3**. +The latest, recommended version of LazyLoad is **17.2.0**. Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md). @@ -207,14 +207,14 @@ If you prefer to load a polyfill, the regular LazyLoad behaviour is granted. The easiest way to use LazyLoad is to include the script from a CDN: ```html - + ``` Or, with the IntersectionObserver polyfill: ```html - + ``` Then, in your javascript code: @@ -246,7 +246,7 @@ Include RequireJS: Then `require` the AMD version of LazyLoad, like this: ```js -var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.3/dist/lazyload.amd.min.js"; +var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.2.0/dist/lazyload.amd.min.js"; var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js"; /// Dynamically define the dependencies @@ -291,7 +291,7 @@ Then include the script. ```html ``` @@ -325,7 +325,7 @@ Then include the script. ```html ``` diff --git a/dist/lazyload.amd.js b/dist/lazyload.amd.js index 4817e7fb..9535eddd 100644 --- a/dist/lazyload.amd.js +++ b/dist/lazyload.amd.js @@ -367,7 +367,6 @@ define(function () { 'use strict'; var manageApplied = function manageApplied(element, settings, instance) { addClass(element, settings.class_applied); setStatus(element, statusApplied); - removeDataMultiBackground(element, settings); if (settings.unobserve_completed) { // Unobserve now because we can't do it on load @@ -381,49 +380,6 @@ define(function () { 'use strict'; addClass(element, settings.class_loading); setStatus(element, statusLoading); safeCallback(settings.callback_loading, element, instance); - }; // REMOVE DATA ATTRIBUTES -------------- - - var removeDataImg = function removeDataImg(element, settings) { - setData(element, settings.data_src, null); - setData(element, settings.data_srcset, null); - setData(element, settings.data_sizes, null); - forEachPictureSource(element, function (sourceTag) { - setData(sourceTag, settings.data_srcset, null); - setData(sourceTag, settings.data_sizes, null); - }); - }; - var removeDataIframe = function removeDataIframe(element, settings) { - setData(element, settings.data_src, null); - }; - var removeDataVideo = function removeDataVideo(element, settings) { - setData(element, settings.data_src, null); - setData(element, settings.data_poster, null); - forEachVideoSource(element, function (sourceTag) { - setData(sourceTag, settings.data_src, null); - }); - }; - var removeDataFunctions = { - IMG: removeDataImg, - IFRAME: removeDataIframe, - VIDEO: removeDataVideo - }; - var removeDataBackground = function removeDataBackground(element, settings) { - setData(element, settings.data_bg, null); - setData(element, settings.data_bg_hidpi, null); - }; - var removeDataMultiBackground = function removeDataMultiBackground(element, settings) { - setData(element, settings.data_bg_multi, null); - setData(element, settings.data_bg_multi_hidpi, null); - }; - var removeDataAttributes = function removeDataAttributes(element, settings) { - var removeDataFunction = removeDataFunctions[element.tagName]; - - if (removeDataFunction) { - removeDataFunction(element, settings); - return; - } - - removeDataBackground(element, settings); }; var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; @@ -480,7 +436,6 @@ define(function () { 'use strict'; doneHandler(element, settings, instance); addClass(element, settings.class_loaded); setStatus(element, statusLoaded); - removeDataAttributes(element, settings); safeCallback(settings.callback_loaded, element, instance); if (!goingNative) checkFinish(settings, instance); }; @@ -536,7 +491,6 @@ define(function () { 'use strict'; var loadNative = function loadNative(element, settings, instance) { addOneShotEventListeners(element, settings, instance); setSources(element, settings); - removeDataAttributes(element, settings); setStatus(element, statusNative); }; diff --git a/dist/lazyload.amd.min.js b/dist/lazyload.amd.min.js index debcc560..2bcc0a33 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,o={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_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},c=function(t){return n({},o,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},b=["loading","loaded","applied","error"],p=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},h=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},m=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(n){return n.llTempImage},I=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},A=function(n,t){n&&(n.loadingCount+=t)},L=function(n,t){n&&(n.toLoadCount=t)},w=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},y=function(n,t,e){e&&n.setAttribute(t,e)},k=function(n,t){n.removeAttribute(t)},z=function(n){return!!n.llOriginalAttrs},O=function(n){if(!z(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},C=function(n){if(z(n)){var t=n.llOriginalAttrs;y(n,"src",t.src),y(n,"srcset",t.srcset),y(n,"sizes",t.sizes)}},N=function(n,t){y(n,"sizes",s(n,t.data_sizes)),y(n,"srcset",s(n,t.data_srcset)),y(n,"src",s(n,t.data_src))},M=function(n){k(n,"src"),k(n,"srcset"),k(n,"sizes")},x=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&w(e).forEach(t)},R=function(n,t){w(n).forEach(t)},G={IMG:function(n,t){x(n,(function(n){O(n),N(n,t)})),O(n),N(n,t)},IFRAME:function(n,t){y(n,"src",s(n,t.data_src))},VIDEO:function(n,t){R(n,(function(n){y(n,"src",s(n,t.data_src))})),y(n,"poster",s(n,t.data_poster)),y(n,"src",s(n,t.data_src)),n.load()}},T=function(n,t){var e=G[n.tagName];e&&e(n,t)},D=function(n,t,e){A(e,1),h(n,t.class_loading),f(n,"loading"),p(t.callback_loading,n,e)},F={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),x(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),R(n,(function(n){u(n,t.data_src,null)}))}},V=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},P=function(n,t){var e=F[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},S=["IMG","IFRAME","VIDEO"],j=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||p(n.callback_finish,t)},U=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},$=function(n,t,e){n.removeEventListener(t,e)},q=function(n){return!!n.llEvLisnrs},H=function(n){if(q(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];$(n,e,i)}delete n.llEvLisnrs}},B=function(n,t,e){!function(n){delete n.llTempImage}(n),A(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),m(n,t.class_loading),t.unobserve_completed&&I(n,e)},J=function(n,t,e){var i=E(n)||n;q(i)||function(n,t,e){q(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";U(n,i,t),U(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_loaded),f(t,"loaded"),P(t,e),p(e.callback_loaded,t,i),a||j(e,i)}(0,n,t,e),H(i)}),(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_error),f(t,"error"),p(e.callback_error,t,i),a||j(e,i)}(0,n,t,e),H(i)}))},K=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),J(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage='url("'.concat(o,'")'),E(n).setAttribute("src",o),D(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage=o,function(n,t,e){h(n,t.class_applied),f(n,"applied"),V(n,t),t.unobserve_completed&&I(n,t),p(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},Q=function(n,t,e){!function(n){return S.indexOf(n.tagName)>-1}(n)?K(n,t,e):function(n,t,e){J(n,t,e),T(n,t),D(n,t,e)}(n,t,e)},W=["IMG","IFRAME"],X=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},Y=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){f(n,"entered"),function(n,t,e){t.unobserve_entered&&I(n,e)}(n,e,i),p(e.callback_enter,n,t,i),function(n){return b.indexOf(d(n))>=0}(n)||Q(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(H(n),function(n){x(n,(function(n){M(n)})),M(n)}(n),function(n){x(n,(function(n){C(n)})),C(n)}(n),m(n,e.class_loading),A(i,-1),_(n),p(e.callback_cancel,n,t,i))}(n,t,e,i),p(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Z=function(n){return Array.prototype.slice.call(n)},nn=function(n){return n.container.querySelectorAll(n.elements_selector)},tn=function(n){return function(n){return"error"===d(n)}(n)},en=function(n,t){return function(n){return Z(n).filter(g)}(n||nn(t))},an=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!X(n)&&(t._observer=new IntersectionObserver((function(e){Y(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=nn(n),Z(e).filter(tn)).forEach((function(t){m(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return an.prototype={update:function(n){var t,a,r=this._settings,o=en(n,r);L(this,o.length),!e&&i?X(r)?function(n,t,e){n.forEach((function(n){-1!==W.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){J(n,t,e),T(n,t),P(n,t),f(n,"native")}(n,t,e))})),L(e,0)}(o,r,this):(a=o,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),nn(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;en(n,e).forEach((function(n){I(n,t),Q(n,e,t)}))}},an.load=function(n,t){var e=c(t);Q(n,e)},an.resetStatus=function(n){_(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)}(an,window.lazyLoadOptions),an})); +define((function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n1,a={elements_selector:".lazy",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},c=function(n){return t({},a,n)},s=function(t,n){var e,i="LazyLoad::Initialized",r=new t(n);try{e=new CustomEvent(i,{detail:{instance:r}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:r})}window.dispatchEvent(e)},l="loading",u="loaded",d="applied",f="error",_="native",g="data-",v="ll-status",b=function(t,n){return t.getAttribute(g+n)},p=function(t){return b(t,v)},h=function(t,n){return function(t,n,e){var i="data-ll-status";null!==e?t.setAttribute(i,e):t.removeAttribute(i)}(t,0,n)},m=function(t){return h(t,null)},E=function(t){return null===p(t)},A=function(t){return p(t)===_},I=[l,u,d,f],w=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},L=function(t,n){r?t.classList.add(n):t.className+=(t.className?" ":"")+n},k=function(t,n){r?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},y=function(t){return t.llTempImage},O=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},z=function(t,n){t&&(t.loadingCount+=n)},C=function(t,n){t&&(t.toLoadCount=n)},N=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},x=function(t,n,e){e&&t.setAttribute(n,e)},M=function(t,n){t.removeAttribute(n)},R=function(t){return!!t.llOriginalAttrs},G=function(t){if(!R(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},T=function(t){if(R(t)){var n=t.llOriginalAttrs;x(t,"src",n.src),x(t,"srcset",n.srcset),x(t,"sizes",n.sizes)}},D=function(t,n){x(t,"sizes",b(t,n.data_sizes)),x(t,"srcset",b(t,n.data_srcset)),x(t,"src",b(t,n.data_src))},F=function(t){M(t,"src"),M(t,"srcset"),M(t,"sizes")},P=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&N(e).forEach(n)},S={IMG:function(t,n){P(t,(function(t){G(t),D(t,n)})),G(t),D(t,n)},IFRAME:function(t,n){x(t,"src",b(t,n.data_src))},VIDEO:function(t,n){!function(t,e){N(t).forEach((function(t){x(t,"src",b(t,n.data_src))}))}(t),x(t,"poster",b(t,n.data_poster)),x(t,"src",b(t,n.data_src)),t.load()}},V=function(t,n){var e=S[t.tagName];e&&e(t,n)},j=function(t,n,e){z(e,1),L(t,n.class_loading),h(t,l),w(n.callback_loading,t,e)},U=["IMG","IFRAME","VIDEO"],$=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||w(t.callback_finish,n)},q=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},H=function(t,n,e){t.removeEventListener(n,e)},B=function(t){return!!t.llEvLisnrs},J=function(t){if(B(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];H(t,e,i)}delete t.llEvLisnrs}},K=function(t,n,e){!function(t){delete t.llTempImage}(t),z(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),k(t,n.class_loading),n.unobserve_completed&&O(t,e)},Q=function(t,n,e){var i=y(t)||t;B(i)||function(t,n,e){B(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";q(t,i,n),q(t,"error",e)}(i,(function(r){!function(t,n,e,i){var r=A(n);K(n,e,i),L(n,e.class_loaded),h(n,u),w(e.callback_loaded,n,i),r||$(e,i)}(0,t,n,e),J(i)}),(function(r){!function(t,n,e,i){var r=A(n);K(n,e,i),L(n,e.class_error),h(n,f),w(e.callback_error,n,i),r||$(e,i)}(0,t,n,e),J(i)}))},W=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),Q(t,n,e),function(t,n,e){var i=b(t,n.data_bg),r=b(t,n.data_bg_hidpi),a=o&&r?r:i;a&&(t.style.backgroundImage='url("'.concat(a,'")'),y(t).setAttribute("src",a),j(t,n,e))}(t,n,e),function(t,n,e){var i=b(t,n.data_bg_multi),r=b(t,n.data_bg_multi_hidpi),a=o&&r?r:i;a&&(t.style.backgroundImage=a,function(t,n,e){L(t,n.class_applied),h(t,d),n.unobserve_completed&&O(t,n),w(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},X=function(t,n,e){!function(t){return U.indexOf(t.tagName)>-1}(t)?W(t,n,e):function(t,n,e){Q(t,n,e),V(t,n),j(t,n,e)}(t,n,e)},Y=["IMG","IFRAME"],Z=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},tt=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){h(t,"entered"),function(t,n,e){n.unobserve_entered&&O(t,e)}(t,e,i),w(e.callback_enter,t,n,i),function(t){return I.indexOf(p(t))>=0}(t)||X(t,e,i)}(t.target,t,n,e):function(t,n,e,i){E(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return p(t)===l}(t)&&"IMG"===t.tagName&&(J(t),function(t){P(t,(function(t){F(t)})),F(t)}(t),function(t){P(t,(function(t){T(t)})),T(t)}(t),k(t,e.class_loading),z(i,-1),m(t),w(e.callback_cancel,t,n,i))}(t,n,e,i),w(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},nt=function(t){return Array.prototype.slice.call(t)},et=function(t){return t.container.querySelectorAll(t.elements_selector)},it=function(t){return function(t){return p(t)===f}(t)},rt=function(t,n){return function(t){return nt(t).filter(E)}(t||et(n))},ot=function(t,e){var r=c(t);this._settings=r,this.loadingCount=0,function(t,n){i&&!Z(t)&&(n._observer=new IntersectionObserver((function(e){tt(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(r,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=et(t),nt(e).filter(it)).forEach((function(n){k(n,t.class_error),m(n)})),n.update()}(t,e)}))}(r,this),this.update(e)};return ot.prototype={update:function(t){var n,r,o=this._settings,a=rt(t,o);C(this,a.length),!e&&i?Z(o)?function(t,n,e){t.forEach((function(t){-1!==Y.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){Q(t,n,e),V(t,n),h(t,_)}(t,n,e))})),C(e,0)}(a,o,this):(r=a,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,r)):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),et(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;rt(t,e).forEach((function(t){O(t,n),X(t,e,n)}))}},ot.load=function(t,n){var e=c(n);X(t,e)},ot.resetStatus=function(t){m(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)s(t,e);else s(t,n)}(ot,window.lazyLoadOptions),ot})); diff --git a/dist/lazyload.esm.js b/dist/lazyload.esm.js index 961f9a34..29d27094 100644 --- a/dist/lazyload.esm.js +++ b/dist/lazyload.esm.js @@ -111,7 +111,7 @@ const hasStatusError = (element) => getStatus(element) === statusError; const hasStatusNative = (element) => getStatus(element) === statusNative; const statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError]; -const hadStartedLoading = (element) => (statusesAfterLoading.indexOf(getStatus(element)) >= 0); +const hadStartedLoading = (element) => statusesAfterLoading.indexOf(getStatus(element)) >= 0; const safeCallback = (callback, arg1, arg2, arg3) => { if (!callback) { @@ -341,7 +341,6 @@ const setSources = (element, settings) => { const manageApplied = (element, settings, instance) => { addClass(element, settings.class_applied); setStatus(element, statusApplied); - removeDataMultiBackground(element, settings); if (settings.unobserve_completed) { // Unobserve now because we can't do it on load unobserve(element, settings); @@ -356,55 +355,6 @@ const manageLoading = (element, settings, instance) => { safeCallback(settings.callback_loading, element, instance); }; -// REMOVE DATA ATTRIBUTES -------------- - -const removeDataImg = (element, settings) => { - setData(element, settings.data_src, null); - setData(element, settings.data_srcset, null); - setData(element, settings.data_sizes, null); - forEachPictureSource(element, (sourceTag) => { - setData(sourceTag, settings.data_srcset, null); - setData(sourceTag, settings.data_sizes, null); - }); -}; - -const removeDataIframe = (element, settings) => { - setData(element, settings.data_src, null); -}; - -const removeDataVideo = (element, settings) => { - setData(element, settings.data_src, null); - setData(element, settings.data_poster, null); - forEachVideoSource(element, (sourceTag) => { - setData(sourceTag, settings.data_src, null); - }); -}; - -const removeDataFunctions = { - IMG: removeDataImg, - IFRAME: removeDataIframe, - VIDEO: removeDataVideo -}; - -const removeDataBackground = (element, settings) => { - setData(element, settings.data_bg, null); - setData(element, settings.data_bg_hidpi, null); -}; - -const removeDataMultiBackground = (element, settings) => { - setData(element, settings.data_bg_multi, null); - setData(element, settings.data_bg_multi_hidpi, null); -}; - -const removeDataAttributes = (element, settings) => { - const removeDataFunction = removeDataFunctions[element.tagName]; - if (removeDataFunction) { - removeDataFunction(element, settings); - return; - } - removeDataBackground(element, settings); -}; - const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1; @@ -461,7 +411,6 @@ const loadHandler = (event, element, settings, instance) => { doneHandler(element, settings, instance); addClass(element, settings.class_loaded); setStatus(element, statusLoaded); - removeDataAttributes(element, settings); safeCallback(settings.callback_loaded, element, instance); if (!goingNative) checkFinish(settings, instance); }; @@ -516,7 +465,6 @@ const load = (element, settings, instance) => { const loadNative = (element, settings, instance) => { addOneShotEventListeners(element, settings, instance); setSources(element, settings); - removeDataAttributes(element, settings); setStatus(element, statusNative); }; diff --git a/dist/lazyload.esm.min.js b/dist/lazyload.esm.min.js index 2b08c4b5..81a3a39a 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,l=e&&"classList"in document.createElement("p"),s=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_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},r=e=>Object.assign({},n,e),i=function(e,t){var a;let l=new e(t);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:l}})}catch(e){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:l})}window.dispatchEvent(a)},o=(e,t)=>e.getAttribute("data-"+t),c=(e,t,a)=>{var l="data-"+t;null!==a?e.setAttribute(l,a):e.removeAttribute(l)},d=e=>o(e,"ll-status"),_=(e,t)=>c(e,"ll-status",t),u=e=>_(e,null),g=e=>null===d(e),b=e=>"native"===d(e),p=["loading","loaded","applied","error"],h=(e,t,a,l)=>{e&&(void 0===l?void 0===a?e(t):e(t,a):e(t,a,l))},m=(e,t)=>{l?e.classList.add(t):e.className+=(e.className?" ":"")+t},v=(e,t)=>{l?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=e=>e.llTempImage,f=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},I=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},L=e=>{let t=[];for(let a,l=0;a=e.children[l];l+=1)"SOURCE"===a.tagName&&t.push(a);return t},w=(e,t,a)=>{a&&e.setAttribute(t,a)},k=(e,t)=>{e.removeAttribute(t)},z=e=>!!e.llOriginalAttrs,y=e=>{if(z(e))return;const t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t},O=e=>{if(!z(e))return;const t=e.llOriginalAttrs;w(e,"src",t.src),w(e,"srcset",t.srcset),w(e,"sizes",t.sizes)},C=(e,t)=>{w(e,"sizes",o(e,t.data_sizes)),w(e,"srcset",o(e,t.data_srcset)),w(e,"src",o(e,t.data_src))},N=e=>{k(e,"src"),k(e,"srcset"),k(e,"sizes")},M=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&L(a).forEach(t)},x=(e,t)=>{L(e).forEach(t)},R={IMG:(e,t)=>{M(e,e=>{y(e),C(e,t)}),y(e),C(e,t)},IFRAME:(e,t)=>{w(e,"src",o(e,t.data_src))},VIDEO:(e,t)=>{x(e,e=>{w(e,"src",o(e,t.data_src))}),w(e,"poster",o(e,t.data_poster)),w(e,"src",o(e,t.data_src)),e.load()}},G=(e,t)=>{const a=R[e.tagName];a&&a(e,t)},T=(e,t,a)=>{I(a,1),m(e,t.class_loading),_(e,"loading"),h(t.callback_loading,e,a)},D={IMG:(e,t)=>{c(e,t.data_src,null),c(e,t.data_srcset,null),c(e,t.data_sizes,null),M(e,e=>{c(e,t.data_srcset,null),c(e,t.data_sizes,null)})},IFRAME:(e,t)=>{c(e,t.data_src,null)},VIDEO:(e,t)=>{c(e,t.data_src,null),c(e,t.data_poster,null),x(e,e=>{c(e,t.data_src,null)})}},F=(e,t)=>{c(e,t.data_bg_multi,null),c(e,t.data_bg_multi_hidpi,null)},V=(e,t)=>{const a=D[e.tagName];a?a(e,t):((e,t)=>{c(e,t.data_bg,null),c(e,t.data_bg_hidpi,null)})(e,t)},S=["IMG","IFRAME","VIDEO"],$=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},P=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},U=(e,t,a)=>{e.removeEventListener(t,a)},j=e=>!!e.llEvLisnrs,q=e=>{if(!j(e))return;const t=e.llEvLisnrs;for(let a in t){const l=t[a];U(e,a,l)}delete e.llEvLisnrs},H=(e,t,a)=>{(e=>{delete e.llTempImage})(e),I(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),v(e,t.class_loading),t.unobserve_completed&&f(e,a)},B=(e,t,a)=>{const l=E(e)||e;j(l)||((e,t,a)=>{j(e)||(e.llEvLisnrs={});const l="VIDEO"===e.tagName?"loadeddata":"load";P(e,l,t),P(e,"error",a)})(l,s=>{((e,t,a,l)=>{const s=b(t);H(t,a,l),m(t,a.class_loaded),_(t,"loaded"),V(t,a),h(a.callback_loaded,t,l),s||$(a,l)})(0,e,t,a),q(l)},s=>{((e,t,a,l)=>{const s=b(t);H(t,a,l),m(t,a.class_error),_(t,"error"),h(a.callback_error,t,l),s||$(a,l)})(0,e,t,a),q(l)})},J=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),B(e,t,a),((e,t,a)=>{const l=o(e,t.data_bg),n=o(e,t.data_bg_hidpi),r=s&&n?n:l;r&&(e.style.backgroundImage=`url("${r}")`,E(e).setAttribute("src",r),T(e,t,a))})(e,t,a),((e,t,a)=>{const l=o(e,t.data_bg_multi),n=o(e,t.data_bg_multi_hidpi),r=s&&n?n:l;r&&(e.style.backgroundImage=r,((e,t,a)=>{m(e,t.class_applied),_(e,"applied"),F(e,t),t.unobserve_completed&&f(e,t),h(t.callback_applied,e,a)})(e,t,a))})(e,t,a)},K=(e,t,a)=>{(e=>S.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{B(e,t,a),G(e,t),T(e,t,a)})(e,t,a):J(e,t,a)},Q=["IMG","IFRAME"],W=e=>e.use_native&&"loading"in HTMLImageElement.prototype,X=(e,t,a)=>{e.forEach(e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,l)=>{_(e,"entered"),((e,t,a)=>{t.unobserve_entered&&f(e,a)})(e,a,l),h(a.callback_enter,e,t,l),(e=>p.indexOf(d(e))>=0)(e)||K(e,a,l)})(e.target,e,t,a):((e,t,a,l)=>{g(e)||(((e,t,a,l)=>{a.cancel_on_exit&&(e=>"loading"===d(e))(e)&&"IMG"===e.tagName&&(q(e),(e=>{M(e,e=>{N(e)}),N(e)})(e),(e=>{M(e,e=>{O(e)}),O(e)})(e),v(e,a.class_loading),I(l,-1),u(e),h(a.callback_cancel,e,t,l))})(e,t,a,l),h(a.callback_exit,e,t,l))})(e.target,e,t,a))},Y=e=>Array.prototype.slice.call(e),Z=e=>e.container.querySelectorAll(e.elements_selector),ee=e=>(e=>"error"===d(e))(e),te=(e,t)=>(e=>Y(e).filter(g))(e||Z(t)),ae=function(t,l){const s=r(t);this._settings=s,this.loadingCount=0,((e,t)=>{a&&!W(e)&&(t._observer=new IntersectionObserver(a=>{X(a,e,t)},(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(s,this),((t,a)=>{e&&window.addEventListener("online",()=>{((e,t)=>{var a;(a=Z(e),Y(a).filter(ee)).forEach(t=>{v(t,e.class_error),u(t)}),t.update()})(t,a)})})(s,this),this.update(l)};ae.prototype={update:function(e){const l=this._settings,s=te(e,l);var n,r;A(this,s.length),!t&&a?W(l)?((e,t,a)=>{e.forEach(e=>{-1!==Q.indexOf(e.tagName)&&(e.setAttribute("loading","lazy"),((e,t,a)=>{B(e,t,a),G(e,t),V(e,t),_(e,"native")})(e,t,a))}),A(a,0)})(s,l,this):(r=s,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach(t=>{e.observe(t)})})(n,r)):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),Z(this._settings).forEach(e=>{delete e.llOriginalAttrs}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;te(e,t).forEach(e=>{f(e,this),K(e,t,this)})}},ae.load=(e,t)=>{const a=r(t);K(e,a)},ae.resetStatus=e=>{u(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,l=0;a=t[l];l+=1)i(e,a);else i(e,t)})(ae,window.lazyLoadOptions);export default ae; +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_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},r=e=>Object.assign({},n,e),i=function(e,t){var a;let s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){(a=document.createEvent("CustomEvent")).initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},o=(e,t)=>e.getAttribute("data-"+t),c=e=>o(e,"ll-status"),d=(e,t)=>((e,t,a)=>{var s="data-ll-status";null!==a?e.setAttribute(s,a):e.removeAttribute(s)})(e,0,t),u=e=>d(e,null),_=e=>null===c(e),g=e=>"native"===c(e),b=["loading","loaded","applied","error"],p=(e,t,a,s)=>{e&&(void 0===s?void 0===a?e(t):e(t,a):e(t,a,s))},h=(e,t)=>{s?e.classList.add(t):e.className+=(e.className?" ":"")+t},m=(e,t)=>{s?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},v=e=>e.llTempImage,f=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},E=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},I=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},w=(e,t,a)=>{a&&e.setAttribute(t,a)},L=(e,t)=>{e.removeAttribute(t)},k=e=>!!e.llOriginalAttrs,y=e=>{if(k(e))return;const t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t},O=e=>{if(!k(e))return;const t=e.llOriginalAttrs;w(e,"src",t.src),w(e,"srcset",t.srcset),w(e,"sizes",t.sizes)},z=(e,t)=>{w(e,"sizes",o(e,t.data_sizes)),w(e,"srcset",o(e,t.data_srcset)),w(e,"src",o(e,t.data_src))},C=e=>{L(e,"src"),L(e,"srcset"),L(e,"sizes")},N=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&I(a).forEach(t)},x={IMG:(e,t)=>{N(e,e=>{y(e),z(e,t)}),y(e),z(e,t)},IFRAME:(e,t)=>{w(e,"src",o(e,t.data_src))},VIDEO:(e,t)=>{((e,a)=>{I(e).forEach(e=>{w(e,"src",o(e,t.data_src))})})(e),w(e,"poster",o(e,t.data_poster)),w(e,"src",o(e,t.data_src)),e.load()}},M=(e,t)=>{const a=x[e.tagName];a&&a(e,t)},R=(e,t,a)=>{E(a,1),h(e,t.class_loading),d(e,"loading"),p(t.callback_loading,e,a)},G=["IMG","IFRAME","VIDEO"],T=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||p(e.callback_finish,t)},D=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},F=(e,t,a)=>{e.removeEventListener(t,a)},S=e=>!!e.llEvLisnrs,V=e=>{if(!S(e))return;const t=e.llEvLisnrs;for(let a in t){const s=t[a];F(e,a,s)}delete e.llEvLisnrs},$=(e,t,a)=>{(e=>{delete e.llTempImage})(e),E(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),m(e,t.class_loading),t.unobserve_completed&&f(e,a)},P=(e,t,a)=>{const s=v(e)||e;S(s)||((e,t,a)=>{S(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";D(e,s,t),D(e,"error",a)})(s,l=>{((e,t,a,s)=>{const l=g(t);$(t,a,s),h(t,a.class_loaded),d(t,"loaded"),p(a.callback_loaded,t,s),l||T(a,s)})(0,e,t,a),V(s)},l=>{((e,t,a,s)=>{const l=g(t);$(t,a,s),h(t,a.class_error),d(t,"error"),p(a.callback_error,t,s),l||T(a,s)})(0,e,t,a),V(s)})},U=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),P(e,t,a),((e,t,a)=>{const s=o(e,t.data_bg),n=o(e,t.data_bg_hidpi),r=l&&n?n:s;r&&(e.style.backgroundImage=`url("${r}")`,v(e).setAttribute("src",r),R(e,t,a))})(e,t,a),((e,t,a)=>{const s=o(e,t.data_bg_multi),n=o(e,t.data_bg_multi_hidpi),r=l&&n?n:s;r&&(e.style.backgroundImage=r,((e,t,a)=>{h(e,t.class_applied),d(e,"applied"),t.unobserve_completed&&f(e,t),p(t.callback_applied,e,a)})(e,t,a))})(e,t,a)},j=(e,t,a)=>{(e=>G.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{P(e,t,a),M(e,t),R(e,t,a)})(e,t,a):U(e,t,a)},q=["IMG","IFRAME"],H=e=>e.use_native&&"loading"in HTMLImageElement.prototype,B=(e,t,a)=>{e.forEach(e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{d(e,"entered"),((e,t,a)=>{t.unobserve_entered&&f(e,a)})(e,a,s),p(a.callback_enter,e,t,s),(e=>b.indexOf(c(e))>=0)(e)||j(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{_(e)||(((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===c(e))(e)&&"IMG"===e.tagName&&(V(e),(e=>{N(e,e=>{C(e)}),C(e)})(e),(e=>{N(e,e=>{O(e)}),O(e)})(e),m(e,a.class_loading),E(s,-1),u(e),p(a.callback_cancel,e,t,s))})(e,t,a,s),p(a.callback_exit,e,t,s))})(e.target,e,t,a))},J=e=>Array.prototype.slice.call(e),K=e=>e.container.querySelectorAll(e.elements_selector),Q=e=>(e=>"error"===c(e))(e),W=(e,t)=>(e=>J(e).filter(_))(e||K(t)),X=function(t,s){const l=r(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!H(e)&&(t._observer=new IntersectionObserver(a=>{B(a,e,t)},(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&window.addEventListener("online",()=>{((e,t)=>{var a;(a=K(e),J(a).filter(Q)).forEach(t=>{m(t,e.class_error),u(t)}),t.update()})(t,a)})})(l,this),this.update(s)};X.prototype={update:function(e){const s=this._settings,l=W(e,s);var n,r;A(this,l.length),!t&&a?H(s)?((e,t,a)=>{e.forEach(e=>{-1!==q.indexOf(e.tagName)&&(e.setAttribute("loading","lazy"),((e,t,a)=>{P(e,t,a),M(e,t),d(e,"native")})(e,t,a))}),A(a,0)})(l,s,this):(r=l,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach(t=>{e.observe(t)})})(n,r)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(e=>{delete e.llOriginalAttrs}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;W(e,t).forEach(e=>{f(e,this),j(e,t,this)})}},X.load=(e,t)=>{const a=r(t);j(e,a)},X.resetStatus=e=>{u(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,s=0;a=t[s];s+=1)i(e,a);else i(e,t)})(X,window.lazyLoadOptions);export default X; diff --git a/dist/lazyload.iife.js b/dist/lazyload.iife.js index 18ed2a02..20fbce8f 100644 --- a/dist/lazyload.iife.js +++ b/dist/lazyload.iife.js @@ -368,7 +368,6 @@ var LazyLoad = (function () { var manageApplied = function manageApplied(element, settings, instance) { addClass(element, settings.class_applied); setStatus(element, statusApplied); - removeDataMultiBackground(element, settings); if (settings.unobserve_completed) { // Unobserve now because we can't do it on load @@ -382,49 +381,6 @@ var LazyLoad = (function () { addClass(element, settings.class_loading); setStatus(element, statusLoading); safeCallback(settings.callback_loading, element, instance); - }; // REMOVE DATA ATTRIBUTES -------------- - - var removeDataImg = function removeDataImg(element, settings) { - setData(element, settings.data_src, null); - setData(element, settings.data_srcset, null); - setData(element, settings.data_sizes, null); - forEachPictureSource(element, function (sourceTag) { - setData(sourceTag, settings.data_srcset, null); - setData(sourceTag, settings.data_sizes, null); - }); - }; - var removeDataIframe = function removeDataIframe(element, settings) { - setData(element, settings.data_src, null); - }; - var removeDataVideo = function removeDataVideo(element, settings) { - setData(element, settings.data_src, null); - setData(element, settings.data_poster, null); - forEachVideoSource(element, function (sourceTag) { - setData(sourceTag, settings.data_src, null); - }); - }; - var removeDataFunctions = { - IMG: removeDataImg, - IFRAME: removeDataIframe, - VIDEO: removeDataVideo - }; - var removeDataBackground = function removeDataBackground(element, settings) { - setData(element, settings.data_bg, null); - setData(element, settings.data_bg_hidpi, null); - }; - var removeDataMultiBackground = function removeDataMultiBackground(element, settings) { - setData(element, settings.data_bg_multi, null); - setData(element, settings.data_bg_multi_hidpi, null); - }; - var removeDataAttributes = function removeDataAttributes(element, settings) { - var removeDataFunction = removeDataFunctions[element.tagName]; - - if (removeDataFunction) { - removeDataFunction(element, settings); - return; - } - - removeDataBackground(element, settings); }; var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; @@ -481,7 +437,6 @@ var LazyLoad = (function () { doneHandler(element, settings, instance); addClass(element, settings.class_loaded); setStatus(element, statusLoaded); - removeDataAttributes(element, settings); safeCallback(settings.callback_loaded, element, instance); if (!goingNative) checkFinish(settings, instance); }; @@ -537,7 +492,6 @@ var LazyLoad = (function () { var loadNative = function loadNative(element, settings, instance) { addOneShotEventListeners(element, settings, instance); setSources(element, settings); - removeDataAttributes(element, settings); setStatus(element, statusNative); }; diff --git a/dist/lazyload.iife.min.js b/dist/lazyload.iife.min.js index 3bb397c8..f6664eb7 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,o={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_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},c=function(t){return n({},o,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},b=["loading","loaded","applied","error"],p=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},h=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},m=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(n){return n.llTempImage},I=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},A=function(n,t){n&&(n.loadingCount+=t)},L=function(n,t){n&&(n.toLoadCount=t)},w=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},y=function(n,t,e){e&&n.setAttribute(t,e)},z=function(n,t){n.removeAttribute(t)},k=function(n){return!!n.llOriginalAttrs},O=function(n){if(!k(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},C=function(n){if(k(n)){var t=n.llOriginalAttrs;y(n,"src",t.src),y(n,"srcset",t.srcset),y(n,"sizes",t.sizes)}},N=function(n,t){y(n,"sizes",s(n,t.data_sizes)),y(n,"srcset",s(n,t.data_srcset)),y(n,"src",s(n,t.data_src))},M=function(n){z(n,"src"),z(n,"srcset"),z(n,"sizes")},x=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&w(e).forEach(t)},R=function(n,t){w(n).forEach(t)},G={IMG:function(n,t){x(n,(function(n){O(n),N(n,t)})),O(n),N(n,t)},IFRAME:function(n,t){y(n,"src",s(n,t.data_src))},VIDEO:function(n,t){R(n,(function(n){y(n,"src",s(n,t.data_src))})),y(n,"poster",s(n,t.data_poster)),y(n,"src",s(n,t.data_src)),n.load()}},T=function(n,t){var e=G[n.tagName];e&&e(n,t)},D=function(n,t,e){A(e,1),h(n,t.class_loading),f(n,"loading"),p(t.callback_loading,n,e)},F={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),x(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),R(n,(function(n){u(n,t.data_src,null)}))}},V=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},P=function(n,t){var e=F[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},S=["IMG","IFRAME","VIDEO"],j=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||p(n.callback_finish,t)},U=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},$=function(n,t,e){n.removeEventListener(t,e)},q=function(n){return!!n.llEvLisnrs},H=function(n){if(q(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];$(n,e,i)}delete n.llEvLisnrs}},B=function(n,t,e){!function(n){delete n.llTempImage}(n),A(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),m(n,t.class_loading),t.unobserve_completed&&I(n,e)},J=function(n,t,e){var i=E(n)||n;q(i)||function(n,t,e){q(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";U(n,i,t),U(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_loaded),f(t,"loaded"),P(t,e),p(e.callback_loaded,t,i),a||j(e,i)}(0,n,t,e),H(i)}),(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_error),f(t,"error"),p(e.callback_error,t,i),a||j(e,i)}(0,n,t,e),H(i)}))},K=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),J(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage='url("'.concat(o,'")'),E(n).setAttribute("src",o),D(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),o=r&&a?a:i;o&&(n.style.backgroundImage=o,function(n,t,e){h(n,t.class_applied),f(n,"applied"),V(n,t),t.unobserve_completed&&I(n,t),p(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},Q=function(n,t,e){!function(n){return S.indexOf(n.tagName)>-1}(n)?K(n,t,e):function(n,t,e){J(n,t,e),T(n,t),D(n,t,e)}(n,t,e)},W=["IMG","IFRAME"],X=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},Y=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){f(n,"entered"),function(n,t,e){t.unobserve_entered&&I(n,e)}(n,e,i),p(e.callback_enter,n,t,i),function(n){return b.indexOf(d(n))>=0}(n)||Q(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(H(n),function(n){x(n,(function(n){M(n)})),M(n)}(n),function(n){x(n,(function(n){C(n)})),C(n)}(n),m(n,e.class_loading),A(i,-1),_(n),p(e.callback_cancel,n,t,i))}(n,t,e,i),p(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Z=function(n){return Array.prototype.slice.call(n)},nn=function(n){return n.container.querySelectorAll(n.elements_selector)},tn=function(n){return function(n){return"error"===d(n)}(n)},en=function(n,t){return function(n){return Z(n).filter(g)}(n||nn(t))},an=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!X(n)&&(t._observer=new IntersectionObserver((function(e){Y(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=nn(n),Z(e).filter(tn)).forEach((function(t){m(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return an.prototype={update:function(n){var t,a,r=this._settings,o=en(n,r);L(this,o.length),!e&&i?X(r)?function(n,t,e){n.forEach((function(n){-1!==W.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){J(n,t,e),T(n,t),P(n,t),f(n,"native")}(n,t,e))})),L(e,0)}(o,r,this):(a=o,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),nn(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;en(n,e).forEach((function(n){I(n,t),Q(n,e,t)}))}},an.load=function(n,t){var e=c(t);Q(n,e)},an.resetStatus=function(n){_(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)}(an,window.lazyLoadOptions),an}(); +var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n1,a={elements_selector:".lazy",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},c=function(n){return t({},a,n)},s=function(t,n){var e,i="LazyLoad::Initialized",r=new t(n);try{e=new CustomEvent(i,{detail:{instance:r}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:r})}window.dispatchEvent(e)},l="loading",u="loaded",d="applied",f="error",_="native",g="data-",v="ll-status",b=function(t,n){return t.getAttribute(g+n)},p=function(t){return b(t,v)},h=function(t,n){return function(t,n,e){var i="data-ll-status";null!==e?t.setAttribute(i,e):t.removeAttribute(i)}(t,0,n)},m=function(t){return h(t,null)},E=function(t){return null===p(t)},A=function(t){return p(t)===_},I=[l,u,d,f],L=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},w=function(t,n){r?t.classList.add(n):t.className+=(t.className?" ":"")+n},y=function(t,n){r?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},k=function(t){return t.llTempImage},O=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},z=function(t,n){t&&(t.loadingCount+=n)},C=function(t,n){t&&(t.toLoadCount=n)},N=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},x=function(t,n,e){e&&t.setAttribute(n,e)},M=function(t,n){t.removeAttribute(n)},R=function(t){return!!t.llOriginalAttrs},G=function(t){if(!R(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},T=function(t){if(R(t)){var n=t.llOriginalAttrs;x(t,"src",n.src),x(t,"srcset",n.srcset),x(t,"sizes",n.sizes)}},D=function(t,n){x(t,"sizes",b(t,n.data_sizes)),x(t,"srcset",b(t,n.data_srcset)),x(t,"src",b(t,n.data_src))},F=function(t){M(t,"src"),M(t,"srcset"),M(t,"sizes")},P=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&N(e).forEach(n)},S={IMG:function(t,n){P(t,(function(t){G(t),D(t,n)})),G(t),D(t,n)},IFRAME:function(t,n){x(t,"src",b(t,n.data_src))},VIDEO:function(t,n){!function(t,e){N(t).forEach((function(t){x(t,"src",b(t,n.data_src))}))}(t),x(t,"poster",b(t,n.data_poster)),x(t,"src",b(t,n.data_src)),t.load()}},V=function(t,n){var e=S[t.tagName];e&&e(t,n)},j=function(t,n,e){z(e,1),w(t,n.class_loading),h(t,l),L(n.callback_loading,t,e)},U=["IMG","IFRAME","VIDEO"],$=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||L(t.callback_finish,n)},q=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},H=function(t,n,e){t.removeEventListener(n,e)},B=function(t){return!!t.llEvLisnrs},J=function(t){if(B(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];H(t,e,i)}delete t.llEvLisnrs}},K=function(t,n,e){!function(t){delete t.llTempImage}(t),z(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),y(t,n.class_loading),n.unobserve_completed&&O(t,e)},Q=function(t,n,e){var i=k(t)||t;B(i)||function(t,n,e){B(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";q(t,i,n),q(t,"error",e)}(i,(function(r){!function(t,n,e,i){var r=A(n);K(n,e,i),w(n,e.class_loaded),h(n,u),L(e.callback_loaded,n,i),r||$(e,i)}(0,t,n,e),J(i)}),(function(r){!function(t,n,e,i){var r=A(n);K(n,e,i),w(n,e.class_error),h(n,f),L(e.callback_error,n,i),r||$(e,i)}(0,t,n,e),J(i)}))},W=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),Q(t,n,e),function(t,n,e){var i=b(t,n.data_bg),r=b(t,n.data_bg_hidpi),a=o&&r?r:i;a&&(t.style.backgroundImage='url("'.concat(a,'")'),k(t).setAttribute("src",a),j(t,n,e))}(t,n,e),function(t,n,e){var i=b(t,n.data_bg_multi),r=b(t,n.data_bg_multi_hidpi),a=o&&r?r:i;a&&(t.style.backgroundImage=a,function(t,n,e){w(t,n.class_applied),h(t,d),n.unobserve_completed&&O(t,n),L(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},X=function(t,n,e){!function(t){return U.indexOf(t.tagName)>-1}(t)?W(t,n,e):function(t,n,e){Q(t,n,e),V(t,n),j(t,n,e)}(t,n,e)},Y=["IMG","IFRAME"],Z=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},tt=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){h(t,"entered"),function(t,n,e){n.unobserve_entered&&O(t,e)}(t,e,i),L(e.callback_enter,t,n,i),function(t){return I.indexOf(p(t))>=0}(t)||X(t,e,i)}(t.target,t,n,e):function(t,n,e,i){E(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return p(t)===l}(t)&&"IMG"===t.tagName&&(J(t),function(t){P(t,(function(t){F(t)})),F(t)}(t),function(t){P(t,(function(t){T(t)})),T(t)}(t),y(t,e.class_loading),z(i,-1),m(t),L(e.callback_cancel,t,n,i))}(t,n,e,i),L(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},nt=function(t){return Array.prototype.slice.call(t)},et=function(t){return t.container.querySelectorAll(t.elements_selector)},it=function(t){return function(t){return p(t)===f}(t)},rt=function(t,n){return function(t){return nt(t).filter(E)}(t||et(n))},ot=function(t,e){var r=c(t);this._settings=r,this.loadingCount=0,function(t,n){i&&!Z(t)&&(n._observer=new IntersectionObserver((function(e){tt(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(r,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=et(t),nt(e).filter(it)).forEach((function(n){y(n,t.class_error),m(n)})),n.update()}(t,e)}))}(r,this),this.update(e)};return ot.prototype={update:function(t){var n,r,o=this._settings,a=rt(t,o);C(this,a.length),!e&&i?Z(o)?function(t,n,e){t.forEach((function(t){-1!==Y.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){Q(t,n,e),V(t,n),h(t,_)}(t,n,e))})),C(e,0)}(a,o,this):(r=a,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,r)):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),et(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;rt(t,e).forEach((function(t){O(t,n),X(t,e,n)}))}},ot.load=function(t,n){var e=c(n);X(t,e)},ot.resetStatus=function(t){m(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)s(t,e);else s(t,n)}(ot,window.lazyLoadOptions),ot}(); diff --git a/dist/lazyload.js b/dist/lazyload.js index 72b4e765..d361f6d7 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -371,7 +371,6 @@ var manageApplied = function manageApplied(element, settings, instance) { addClass(element, settings.class_applied); setStatus(element, statusApplied); - removeDataMultiBackground(element, settings); if (settings.unobserve_completed) { // Unobserve now because we can't do it on load @@ -385,49 +384,6 @@ addClass(element, settings.class_loading); setStatus(element, statusLoading); safeCallback(settings.callback_loading, element, instance); - }; // REMOVE DATA ATTRIBUTES -------------- - - var removeDataImg = function removeDataImg(element, settings) { - setData(element, settings.data_src, null); - setData(element, settings.data_srcset, null); - setData(element, settings.data_sizes, null); - forEachPictureSource(element, function (sourceTag) { - setData(sourceTag, settings.data_srcset, null); - setData(sourceTag, settings.data_sizes, null); - }); - }; - var removeDataIframe = function removeDataIframe(element, settings) { - setData(element, settings.data_src, null); - }; - var removeDataVideo = function removeDataVideo(element, settings) { - setData(element, settings.data_src, null); - setData(element, settings.data_poster, null); - forEachVideoSource(element, function (sourceTag) { - setData(sourceTag, settings.data_src, null); - }); - }; - var removeDataFunctions = { - IMG: removeDataImg, - IFRAME: removeDataIframe, - VIDEO: removeDataVideo - }; - var removeDataBackground = function removeDataBackground(element, settings) { - setData(element, settings.data_bg, null); - setData(element, settings.data_bg_hidpi, null); - }; - var removeDataMultiBackground = function removeDataMultiBackground(element, settings) { - setData(element, settings.data_bg_multi, null); - setData(element, settings.data_bg_multi_hidpi, null); - }; - var removeDataAttributes = function removeDataAttributes(element, settings) { - var removeDataFunction = removeDataFunctions[element.tagName]; - - if (removeDataFunction) { - removeDataFunction(element, settings); - return; - } - - removeDataBackground(element, settings); }; var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; @@ -484,7 +440,6 @@ doneHandler(element, settings, instance); addClass(element, settings.class_loaded); setStatus(element, statusLoaded); - removeDataAttributes(element, settings); safeCallback(settings.callback_loaded, element, instance); if (!goingNative) checkFinish(settings, instance); }; @@ -540,7 +495,6 @@ var loadNative = function loadNative(element, settings, instance) { addOneShotEventListeners(element, settings, instance); setSources(element, settings); - removeDataAttributes(element, settings); setStatus(element, statusNative); }; diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index a89a0fac..c28dd922 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=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_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},c=function(t){return n({},r,t)},l=function(n,t){var e,i=new n(t);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(n,t){return n.getAttribute("data-"+t)},u=function(n,t,e){var i="data-"+t;null!==e?n.setAttribute(i,e):n.removeAttribute(i)},d=function(n){return s(n,"ll-status")},f=function(n,t){return u(n,"ll-status",t)},_=function(n){return f(n,null)},g=function(n){return null===d(n)},v=function(n){return"native"===d(n)},p=["loading","loaded","applied","error"],b=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},h=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},m=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(n){return n.llTempImage},I=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},y=function(n,t){n&&(n.loadingCount+=t)},A=function(n,t){n&&(n.toLoadCount=t)},L=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},w=function(n,t,e){e&&n.setAttribute(t,e)},z=function(n,t){n.removeAttribute(t)},k=function(n){return!!n.llOriginalAttrs},O=function(n){if(!k(n)){var t={};t.src=n.getAttribute("src"),t.srcset=n.getAttribute("srcset"),t.sizes=n.getAttribute("sizes"),n.llOriginalAttrs=t}},C=function(n){if(k(n)){var t=n.llOriginalAttrs;w(n,"src",t.src),w(n,"srcset",t.srcset),w(n,"sizes",t.sizes)}},N=function(n,t){w(n,"sizes",s(n,t.data_sizes)),w(n,"srcset",s(n,t.data_srcset)),w(n,"src",s(n,t.data_src))},x=function(n){z(n,"src"),z(n,"srcset"),z(n,"sizes")},M=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&L(e).forEach(t)},R=function(n,t){L(n).forEach(t)},G={IMG:function(n,t){M(n,(function(n){O(n),N(n,t)})),O(n),N(n,t)},IFRAME:function(n,t){w(n,"src",s(n,t.data_src))},VIDEO:function(n,t){R(n,(function(n){w(n,"src",s(n,t.data_src))})),w(n,"poster",s(n,t.data_poster)),w(n,"src",s(n,t.data_src)),n.load()}},T=function(n,t){var e=G[n.tagName];e&&e(n,t)},D=function(n,t,e){y(e,1),h(n,t.class_loading),f(n,"loading"),b(t.callback_loading,n,e)},F={IMG:function(n,t){u(n,t.data_src,null),u(n,t.data_srcset,null),u(n,t.data_sizes,null),M(n,(function(n){u(n,t.data_srcset,null),u(n,t.data_sizes,null)}))},IFRAME:function(n,t){u(n,t.data_src,null)},VIDEO:function(n,t){u(n,t.data_src,null),u(n,t.data_poster,null),R(n,(function(n){u(n,t.data_src,null)}))}},V=function(n,t){u(n,t.data_bg_multi,null),u(n,t.data_bg_multi_hidpi,null)},j=function(n,t){var e=F[n.tagName];e?e(n,t):function(n,t){u(n,t.data_bg,null),u(n,t.data_bg_hidpi,null)}(n,t)},P=["IMG","IFRAME","VIDEO"],S=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||b(n.callback_finish,t)},U=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},$=function(n,t,e){n.removeEventListener(t,e)},q=function(n){return!!n.llEvLisnrs},H=function(n){if(q(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];$(n,e,i)}delete n.llEvLisnrs}},B=function(n,t,e){!function(n){delete n.llTempImage}(n),y(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),m(n,t.class_loading),t.unobserve_completed&&I(n,e)},J=function(n,t,e){var i=E(n)||n;q(i)||function(n,t,e){q(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";U(n,i,t),U(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_loaded),f(t,"loaded"),j(t,e),b(e.callback_loaded,t,i),a||S(e,i)}(0,n,t,e),H(i)}),(function(a){!function(n,t,e,i){var a=v(t);B(t,e,i),h(t,e.class_error),f(t,"error"),b(e.callback_error,t,i),a||S(e,i)}(0,n,t,e),H(i)}))},K=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),J(n,t,e),function(n,t,e){var i=s(n,t.data_bg),a=s(n,t.data_bg_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),E(n).setAttribute("src",r),D(n,t,e))}(n,t,e),function(n,t,e){var i=s(n,t.data_bg_multi),a=s(n,t.data_bg_multi_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage=r,function(n,t,e){h(n,t.class_applied),f(n,"applied"),V(n,t),t.unobserve_completed&&I(n,t),b(t.callback_applied,n,e)}(n,t,e))}(n,t,e)},Q=function(n,t,e){!function(n){return P.indexOf(n.tagName)>-1}(n)?K(n,t,e):function(n,t,e){J(n,t,e),T(n,t),D(n,t,e)}(n,t,e)},W=["IMG","IFRAME"],X=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},Y=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){f(n,"entered"),function(n,t,e){t.unobserve_entered&&I(n,e)}(n,e,i),b(e.callback_enter,n,t,i),function(n){return p.indexOf(d(n))>=0}(n)||Q(n,e,i)}(n.target,n,t,e):function(n,t,e,i){g(n)||(function(n,t,e,i){e.cancel_on_exit&&function(n){return"loading"===d(n)}(n)&&"IMG"===n.tagName&&(H(n),function(n){M(n,(function(n){x(n)})),x(n)}(n),function(n){M(n,(function(n){C(n)})),C(n)}(n),m(n,e.class_loading),y(i,-1),_(n),b(e.callback_cancel,n,t,i))}(n,t,e,i),b(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},Z=function(n){return Array.prototype.slice.call(n)},nn=function(n){return n.container.querySelectorAll(n.elements_selector)},tn=function(n){return function(n){return"error"===d(n)}(n)},en=function(n,t){return function(n){return Z(n).filter(g)}(n||nn(t))},an=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!X(n)&&(t._observer=new IntersectionObserver((function(e){Y(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=nn(n),Z(e).filter(tn)).forEach((function(t){m(t,n.class_error),_(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return an.prototype={update:function(n){var t,a,o=this._settings,r=en(n,o);A(this,r.length),!e&&i?X(o)?function(n,t,e){n.forEach((function(n){-1!==W.indexOf(n.tagName)&&(n.setAttribute("loading","lazy"),function(n,t,e){J(n,t,e),T(n,t),j(n,t),f(n,"native")}(n,t,e))})),A(e,0)}(r,o,this):(a=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),nn(this._settings).forEach((function(n){delete n.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;en(n,e).forEach((function(n){I(n,t),Q(n,e,t)}))}},an.load=function(n,t){var e=c(t);Q(n,e)},an.resetStatus=function(n){_(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)}(an,window.lazyLoadOptions),an})); +!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n1,a={elements_selector:".lazy",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",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},c=function(n){return t({},a,n)},s=function(t,n){var e,i="LazyLoad::Initialized",o=new t(n);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="loading",u="loaded",f="applied",d="error",_="native",g="data-",v="ll-status",p=function(t,n){return t.getAttribute(g+n)},b=function(t){return p(t,v)},h=function(t,n){return function(t,n,e){var i="data-ll-status";null!==e?t.setAttribute(i,e):t.removeAttribute(i)}(t,0,n)},m=function(t){return h(t,null)},E=function(t){return null===b(t)},y=function(t){return b(t)===_},A=[l,u,f,d],I=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},L=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},w=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},k=function(t){return t.llTempImage},O=function(t,n){if(n){var e=n._observer;e&&e.unobserve(t)}},z=function(t,n){t&&(t.loadingCount+=n)},C=function(t,n){t&&(t.toLoadCount=n)},x=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},N=function(t,n,e){e&&t.setAttribute(n,e)},M=function(t,n){t.removeAttribute(n)},R=function(t){return!!t.llOriginalAttrs},G=function(t){if(!R(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},T=function(t){if(R(t)){var n=t.llOriginalAttrs;N(t,"src",n.src),N(t,"srcset",n.srcset),N(t,"sizes",n.sizes)}},j=function(t,n){N(t,"sizes",p(t,n.data_sizes)),N(t,"srcset",p(t,n.data_srcset)),N(t,"src",p(t,n.data_src))},D=function(t){M(t,"src"),M(t,"srcset"),M(t,"sizes")},F=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&x(e).forEach(n)},P={IMG:function(t,n){F(t,(function(t){G(t),j(t,n)})),G(t),j(t,n)},IFRAME:function(t,n){N(t,"src",p(t,n.data_src))},VIDEO:function(t,n){!function(t,e){x(t).forEach((function(t){N(t,"src",p(t,n.data_src))}))}(t),N(t,"poster",p(t,n.data_poster)),N(t,"src",p(t,n.data_src)),t.load()}},S=function(t,n){var e=P[t.tagName];e&&e(t,n)},V=function(t,n,e){z(e,1),L(t,n.class_loading),h(t,l),I(n.callback_loading,t,e)},U=["IMG","IFRAME","VIDEO"],$=function(t,n){!n||function(t){return t.loadingCount>0}(n)||function(t){return t.toLoadCount>0}(n)||I(t.callback_finish,n)},q=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},H=function(t,n,e){t.removeEventListener(n,e)},B=function(t){return!!t.llEvLisnrs},J=function(t){if(B(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];H(t,e,i)}delete t.llEvLisnrs}},K=function(t,n,e){!function(t){delete t.llTempImage}(t),z(e,-1),function(t){t&&(t.toLoadCount-=1)}(e),w(t,n.class_loading),n.unobserve_completed&&O(t,e)},Q=function(t,n,e){var i=k(t)||t;B(i)||function(t,n,e){B(t)||(t.llEvLisnrs={});var i="VIDEO"===t.tagName?"loadeddata":"load";q(t,i,n),q(t,"error",e)}(i,(function(o){!function(t,n,e,i){var o=y(n);K(n,e,i),L(n,e.class_loaded),h(n,u),I(e.callback_loaded,n,i),o||$(e,i)}(0,t,n,e),J(i)}),(function(o){!function(t,n,e,i){var o=y(n);K(n,e,i),L(n,e.class_error),h(n,d),I(e.callback_error,n,i),o||$(e,i)}(0,t,n,e),J(i)}))},W=function(t,n,e){!function(t){t.llTempImage=document.createElement("IMG")}(t),Q(t,n,e),function(t,n,e){var i=p(t,n.data_bg),o=p(t,n.data_bg_hidpi),a=r&&o?o:i;a&&(t.style.backgroundImage='url("'.concat(a,'")'),k(t).setAttribute("src",a),V(t,n,e))}(t,n,e),function(t,n,e){var i=p(t,n.data_bg_multi),o=p(t,n.data_bg_multi_hidpi),a=r&&o?o:i;a&&(t.style.backgroundImage=a,function(t,n,e){L(t,n.class_applied),h(t,f),n.unobserve_completed&&O(t,n),I(n.callback_applied,t,e)}(t,n,e))}(t,n,e)},X=function(t,n,e){!function(t){return U.indexOf(t.tagName)>-1}(t)?W(t,n,e):function(t,n,e){Q(t,n,e),S(t,n),V(t,n,e)}(t,n,e)},Y=["IMG","IFRAME"],Z=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},tt=function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?function(t,n,e,i){h(t,"entered"),function(t,n,e){n.unobserve_entered&&O(t,e)}(t,e,i),I(e.callback_enter,t,n,i),function(t){return A.indexOf(b(t))>=0}(t)||X(t,e,i)}(t.target,t,n,e):function(t,n,e,i){E(t)||(function(t,n,e,i){e.cancel_on_exit&&function(t){return b(t)===l}(t)&&"IMG"===t.tagName&&(J(t),function(t){F(t,(function(t){D(t)})),D(t)}(t),function(t){F(t,(function(t){T(t)})),T(t)}(t),w(t,e.class_loading),z(i,-1),m(t),I(e.callback_cancel,t,n,i))}(t,n,e,i),I(e.callback_exit,t,n,i))}(t.target,t,n,e)}))},nt=function(t){return Array.prototype.slice.call(t)},et=function(t){return t.container.querySelectorAll(t.elements_selector)},it=function(t){return function(t){return b(t)===d}(t)},ot=function(t,n){return function(t){return nt(t).filter(E)}(t||et(n))},rt=function(t,e){var o=c(t);this._settings=o,this.loadingCount=0,function(t,n){i&&!Z(t)&&(n._observer=new IntersectionObserver((function(e){tt(e,t,n)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(t)))}(o,this),function(t,e){n&&window.addEventListener("online",(function(){!function(t,n){var e;(e=et(t),nt(e).filter(it)).forEach((function(n){w(n,t.class_error),m(n)})),n.update()}(t,e)}))}(o,this),this.update(e)};return rt.prototype={update:function(t){var n,o,r=this._settings,a=ot(t,r);C(this,a.length),!e&&i?Z(r)?function(t,n,e){t.forEach((function(t){-1!==Y.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){Q(t,n,e),S(t,n),h(t,_)}(t,n,e))})),C(e,0)}(a,r,this):(o=a,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,o)):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),et(this._settings).forEach((function(t){delete t.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;ot(t,e).forEach((function(t){O(t,n),X(t,e,n)}))}},rt.load=function(t,n){var e=c(n);X(t,e)},rt.resetStatus=function(t){m(t)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)s(t,e);else s(t,n)}(rt,window.lazyLoadOptions),rt})); diff --git a/package-lock.json b/package-lock.json index be9c5da1..3fdf715f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vanilla-lazyload", - "version": "17.1.0", + "version": "17.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2197,9 +2197,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001061", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz", - "integrity": "sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ==", + "version": "1.0.30001159", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001159.tgz", + "integrity": "sha512-w9Ph56jOsS8RL20K9cLND3u/+5WASWdhC/PPrf+V3/HsM3uHOavWOR1Xzakbv4Puo/srmPHudkmCRWM7Aq+/UA==", "dev": true }, "capture-exit": { diff --git a/package.json b/package.json index 00efffe5..161cd35f 100644 --- a/package.json +++ b/package.json @@ -1,65 +1,65 @@ { - "name": "vanilla-lazyload", - "version": "17.1.3", - "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", - "browser": "dist/lazyload.min.js", - "typings": "typings/lazyload.d.ts", - "dependencies": {}, - "devDependencies": { - "@babel/core": "^7.9.6", - "@babel/plugin-transform-object-assign": "^7.8.3", - "@babel/preset-env": "^7.9.6", - "@rollup/plugin-node-resolve": "^7.1.3", - "jest": "^25.5.4", - "rollup": "^1.32.1", - "rollup-plugin-babel": "^4.4.0", - "rollup-plugin-terser": "^7.0.0" - }, - "scripts": { - "build": "rollup -c", - "dev": "rollup -c --watch", - "test": "jest", - "devtest": "jest --watch" - }, - "files": [ - "dist", - "typings" - ], - "repository": { - "type": "git", - "url": "https://github.com/verlok/vanilla-lazyload" - }, - "keywords": [ - "lazyload", - "vanilla", - "responsive", - "images", - "picture", - "srcset", - "sizes", - "native", - "SEO", - "intersectionObserver", - "progressive", - "performance", - "perfmatters", - "async", - "no-jquery" - ], - "author": { - "name": "Andrea \"verlok\" Verlicchi", - "email": "andrea.verlicchi@gmail.com", - "url": "https://www.andreaverlicchi.eu" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/verlok/vanilla-lazyload/issues" - }, - "homepage": "https://www.andreaverlicchi.eu/vanilla-lazyload", - "funding": { - "type": "individual", - "url": "https://ko-fi.com/verlok" - } + "name": "vanilla-lazyload", + "version": "17.2.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", + "browser": "dist/lazyload.min.js", + "typings": "typings/lazyload.d.ts", + "dependencies": {}, + "devDependencies": { + "@babel/core": "^7.9.6", + "@babel/plugin-transform-object-assign": "^7.8.3", + "@babel/preset-env": "^7.9.6", + "@rollup/plugin-node-resolve": "^7.1.3", + "jest": "^25.5.4", + "rollup": "^1.32.1", + "rollup-plugin-babel": "^4.4.0", + "rollup-plugin-terser": "^7.0.0" + }, + "scripts": { + "build": "rollup -c", + "dev": "rollup -c --watch", + "test": "jest", + "devtest": "jest --watch" + }, + "files": [ + "dist", + "typings" + ], + "repository": { + "type": "git", + "url": "https://github.com/verlok/vanilla-lazyload" + }, + "keywords": [ + "lazyload", + "vanilla", + "responsive", + "images", + "picture", + "srcset", + "sizes", + "native", + "SEO", + "intersectionObserver", + "progressive", + "performance", + "perfmatters", + "async", + "no-jquery" + ], + "author": { + "name": "Andrea \"verlok\" Verlicchi", + "email": "andrea.verlicchi@gmail.com", + "url": "https://www.andreaverlicchi.eu" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/verlok/vanilla-lazyload/issues" + }, + "homepage": "https://www.andreaverlicchi.eu/vanilla-lazyload", + "funding": { + "type": "individual", + "url": "https://ko-fi.com/verlok" + } }