New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vanilla-lazyload
Advanced tools
vanilla-lazyload - npm Package Compare versions
Comparing version 17.3.1 to 17.3.2
@@ -5,2 +5,6 @@ # CHANGELOG | ||
| #### 17.3.2 | ||
| - Fixes double trigger of `callback_load` after a watched image was loaded using the static `load()` method (#526). Thanks to @nick-vincent. | ||
| #### 17.3.1 | ||
@@ -7,0 +11,0 @@ |
@@ -514,2 +514,6 @@ 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. */ | ||
| setStatus(element, statusEntered); | ||
@@ -520,4 +524,3 @@ addClass(element, settings.class_entered); | ||
| safeCallback(settings.callback_enter, element, entry, instance); | ||
| if (hadStartedLoading(element)) return; //Prevent loading it again | ||
| if (dontLoad) return; | ||
| load(element, settings, instance); | ||
@@ -524,0 +527,0 @@ }; |
@@ -1,1 +0,1 @@ | ||
| define((function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,r=n&&"classList"in document.createElement("p"),a=n&&window.devicePixelRatio>1,o={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",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},c=function(n){return t({},o,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)}},x=function(t,n){t&&(t.loadingCount+=n)},z=function(t,n){t&&(t.toLoadCount=n)},C=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)}},D=function(t,n){N(t,"sizes",b(t,n.data_sizes)),N(t,"srcset",b(t,n.data_srcset)),N(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&&C(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){N(t,"src",b(t,n.data_src))},VIDEO:function(t,n){!function(t,e){C(t).forEach((function(t){N(t,"src",b(t,n.data_src))}))}(t),N(t,"poster",b(t,n.data_poster)),N(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){x(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),x(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),o=a&&r?r:i;o&&(t.style.backgroundImage='url("'.concat(o,'")'),y(t).setAttribute("src",o),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),o=a&&r?r:i;o&&(t.style.backgroundImage=o,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"),L(t,e.class_entered),k(t,e.class_exited),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)||(L(t,e.class_exited),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),x(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))},at=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 at.prototype={update:function(t){var n,r,a=this._settings,o=rt(t,a);z(this,o.length),!e&&i?Z(a)?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))})),z(e,0)}(o,a,this):(r=o,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,r)):this.loadAll(o)},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)}))}},at.load=function(t,n){var e=c(n);X(t,e)},at.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)}(at,window.lazyLoadOptions),at})); | ||
| define((function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,r=n&&"classList"in document.createElement("p"),a=n&&window.devicePixelRatio>1,o={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",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},c=function(n){return t({},o,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)}},x=function(t,n){t&&(t.loadingCount+=n)},z=function(t,n){t&&(t.toLoadCount=n)},C=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)}},D=function(t,n){N(t,"sizes",b(t,n.data_sizes)),N(t,"srcset",b(t,n.data_srcset)),N(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&&C(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){N(t,"src",b(t,n.data_src))},VIDEO:function(t,n){!function(t,e){C(t).forEach((function(t){N(t,"src",b(t,n.data_src))}))}(t),N(t,"poster",b(t,n.data_poster)),N(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){x(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),x(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),o=a&&r?r:i;o&&(t.style.backgroundImage='url("'.concat(o,'")'),y(t).setAttribute("src",o),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),o=a&&r?r:i;o&&(t.style.backgroundImage=o,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){var r=function(t){return I.indexOf(p(t))>=0}(t);h(t,"entered"),L(t,e.class_entered),k(t,e.class_exited),function(t,n,e){n.unobserve_entered&&O(t,e)}(t,e,i),w(e.callback_enter,t,n,i),r||X(t,e,i)}(t.target,t,n,e):function(t,n,e,i){E(t)||(L(t,e.class_exited),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),x(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))},at=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 at.prototype={update:function(t){var n,r,a=this._settings,o=rt(t,a);z(this,o.length),!e&&i?Z(a)?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))})),z(e,0)}(o,a,this):(r=o,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,r)):this.loadAll(o)},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)}))}},at.load=function(t,n){var e=c(n);X(t,e)},at.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)}(at,window.lazyLoadOptions),at})); |
@@ -487,2 +487,4 @@ const runningOnBrowser = typeof window !== "undefined"; | ||
| const onEnter = (element, entry, settings, instance) => { | ||
| const dontLoad = hadStartedLoading(element); /* Save status | ||
| before setting it, to prevent loading it again. Fixes #526. */ | ||
| setStatus(element, statusEntered); | ||
@@ -493,3 +495,3 @@ addClass(element, settings.class_entered); | ||
| safeCallback(settings.callback_enter, element, entry, instance); | ||
| if (hadStartedLoading(element)) return; //Prevent loading it again | ||
| if (dontLoad) return; | ||
| load(element, settings, instance); | ||
@@ -496,0 +498,0 @@ }; |
@@ -1,1 +0,1 @@ | ||
| const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),s=e&&"IntersectionObserver"in window,a=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",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},r=e=>Object.assign({},n,e),i=function(e,t){var s;let a="LazyLoad::Initialized",l=new e(t);try{s=new CustomEvent(a,{detail:{instance:l}})}catch(e){(s=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:l})}window.dispatchEvent(s)},o=(e,t)=>e.getAttribute("data-"+t),c=e=>o(e,"ll-status"),d=(e,t)=>((e,t,s)=>{var a="data-ll-status";null!==s?e.setAttribute(a,s):e.removeAttribute(a)})(e,0,t),_=e=>d(e,null),u=e=>null===c(e),g=e=>"native"===c(e),b=["loading","loaded","applied","error"],p=(e,t,s,a)=>{e&&(void 0===a?void 0===s?e(t):e(t,s):e(t,s,a))},h=(e,t)=>{a?e.classList.add(t):e.className+=(e.className?" ":"")+t},m=(e,t)=>{a?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 s=t._observer;s&&s.unobserve(e)},E=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},I=e=>{let t=[];for(let s,a=0;s=e.children[a];a+=1)"SOURCE"===s.tagName&&t.push(s);return t},w=(e,t,s)=>{s&&e.setAttribute(t,s)},L=(e,t)=>{e.removeAttribute(t)},k=e=>!!e.llOriginalAttrs,x=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},y=e=>{if(!k(e))return;const t=e.llOriginalAttrs;w(e,"src",t.src),w(e,"srcset",t.srcset),w(e,"sizes",t.sizes)},O=(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))},z=e=>{L(e,"src"),L(e,"srcset"),L(e,"sizes")},C=(e,t)=>{const s=e.parentNode;s&&"PICTURE"===s.tagName&&I(s).forEach(t)},N={IMG:(e,t)=>{C(e,(e=>{x(e),O(e,t)})),x(e),O(e,t)},IFRAME:(e,t)=>{w(e,"src",o(e,t.data_src))},VIDEO:(e,t)=>{((e,s)=>{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 s=N[e.tagName];s&&s(e,t)},R=(e,t,s)=>{E(s,1),h(e,t.class_loading),d(e,"loading"),p(t.callback_loading,e,s)},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,s)=>{e.addEventListener(t,s),e.llEvLisnrs[t]=s},F=(e,t,s)=>{e.removeEventListener(t,s)},S=e=>!!e.llEvLisnrs,V=e=>{if(!S(e))return;const t=e.llEvLisnrs;for(let s in t){const a=t[s];F(e,s,a)}delete e.llEvLisnrs},$=(e,t,s)=>{(e=>{delete e.llTempImage})(e),E(s,-1),(e=>{e&&(e.toLoadCount-=1)})(s),m(e,t.class_loading),t.unobserve_completed&&f(e,s)},P=(e,t,s)=>{const a=v(e)||e;S(a)||((e,t,s)=>{S(e)||(e.llEvLisnrs={});const a="VIDEO"===e.tagName?"loadeddata":"load";D(e,a,t),D(e,"error",s)})(a,(l=>{((e,t,s,a)=>{const l=g(t);$(t,s,a),h(t,s.class_loaded),d(t,"loaded"),p(s.callback_loaded,t,a),l||T(s,a)})(0,e,t,s),V(a)}),(l=>{((e,t,s,a)=>{const l=g(t);$(t,s,a),h(t,s.class_error),d(t,"error"),p(s.callback_error,t,a),l||T(s,a)})(0,e,t,s),V(a)}))},U=(e,t,s)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),P(e,t,s),((e,t,s)=>{const a=o(e,t.data_bg),n=o(e,t.data_bg_hidpi),r=l&&n?n:a;r&&(e.style.backgroundImage=`url("${r}")`,v(e).setAttribute("src",r),R(e,t,s))})(e,t,s),((e,t,s)=>{const a=o(e,t.data_bg_multi),n=o(e,t.data_bg_multi_hidpi),r=l&&n?n:a;r&&(e.style.backgroundImage=r,((e,t,s)=>{h(e,t.class_applied),d(e,"applied"),t.unobserve_completed&&f(e,t),p(t.callback_applied,e,s)})(e,t,s))})(e,t,s)},j=(e,t,s)=>{(e=>G.indexOf(e.tagName)>-1)(e)?((e,t,s)=>{P(e,t,s),M(e,t),R(e,t,s)})(e,t,s):U(e,t,s)},q=["IMG","IFRAME"],H=e=>e.use_native&&"loading"in HTMLImageElement.prototype,B=(e,t,s)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,s,a)=>{d(e,"entered"),h(e,s.class_entered),m(e,s.class_exited),((e,t,s)=>{t.unobserve_entered&&f(e,s)})(e,s,a),p(s.callback_enter,e,t,a),(e=>b.indexOf(c(e))>=0)(e)||j(e,s,a)})(e.target,e,t,s):((e,t,s,a)=>{u(e)||(h(e,s.class_exited),((e,t,s,a)=>{s.cancel_on_exit&&(e=>"loading"===c(e))(e)&&"IMG"===e.tagName&&(V(e),(e=>{C(e,(e=>{z(e)})),z(e)})(e),(e=>{C(e,(e=>{y(e)})),y(e)})(e),m(e,s.class_loading),E(a,-1),_(e),p(s.callback_cancel,e,t,a))})(e,t,s,a),p(s.callback_exit,e,t,a))})(e.target,e,t,s)))},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(u))(e||K(t)),X=function(t,a){const l=r(t);this._settings=l,this.loadingCount=0,((e,t)=>{s&&!H(e)&&(t._observer=new IntersectionObserver((s=>{B(s,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,s)=>{e&&window.addEventListener("online",(()=>{((e,t)=>{var s;(s=K(e),J(s).filter(Q)).forEach((t=>{m(t,e.class_error),_(t)})),t.update()})(t,s)}))})(l,this),this.update(a)};X.prototype={update:function(e){const a=this._settings,l=W(e,a);var n,r;A(this,l.length),!t&&s?H(a)?((e,t,s)=>{e.forEach((e=>{-1!==q.indexOf(e.tagName)&&(e.setAttribute("loading","lazy"),((e,t,s)=>{P(e,t,s),M(e,t),d(e,"native")})(e,t,s))})),A(s,0)})(l,a,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 s=r(t);j(e,s)},X.resetStatus=e=>{_(e)},e&&((e,t)=>{if(t)if(t.length)for(let s,a=0;s=t[a];a+=1)i(e,s);else i(e,t)})(X,window.lazyLoadOptions);export default X; | ||
| const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),s=e&&"IntersectionObserver"in window,a=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",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},r=e=>Object.assign({},n,e),i=function(e,t){var s;let a="LazyLoad::Initialized",l=new e(t);try{s=new CustomEvent(a,{detail:{instance:l}})}catch(e){(s=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:l})}window.dispatchEvent(s)},o=(e,t)=>e.getAttribute("data-"+t),c=e=>o(e,"ll-status"),d=(e,t)=>((e,t,s)=>{var a="data-ll-status";null!==s?e.setAttribute(a,s):e.removeAttribute(a)})(e,0,t),_=e=>d(e,null),u=e=>null===c(e),g=e=>"native"===c(e),b=["loading","loaded","applied","error"],p=(e,t,s,a)=>{e&&(void 0===a?void 0===s?e(t):e(t,s):e(t,s,a))},h=(e,t)=>{a?e.classList.add(t):e.className+=(e.className?" ":"")+t},m=(e,t)=>{a?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 s=t._observer;s&&s.unobserve(e)},E=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},I=e=>{let t=[];for(let s,a=0;s=e.children[a];a+=1)"SOURCE"===s.tagName&&t.push(s);return t},w=(e,t,s)=>{s&&e.setAttribute(t,s)},L=(e,t)=>{e.removeAttribute(t)},k=e=>!!e.llOriginalAttrs,x=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},y=e=>{if(!k(e))return;const t=e.llOriginalAttrs;w(e,"src",t.src),w(e,"srcset",t.srcset),w(e,"sizes",t.sizes)},O=(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))},z=e=>{L(e,"src"),L(e,"srcset"),L(e,"sizes")},C=(e,t)=>{const s=e.parentNode;s&&"PICTURE"===s.tagName&&I(s).forEach(t)},N={IMG:(e,t)=>{C(e,(e=>{x(e),O(e,t)})),x(e),O(e,t)},IFRAME:(e,t)=>{w(e,"src",o(e,t.data_src))},VIDEO:(e,t)=>{((e,s)=>{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 s=N[e.tagName];s&&s(e,t)},R=(e,t,s)=>{E(s,1),h(e,t.class_loading),d(e,"loading"),p(t.callback_loading,e,s)},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,s)=>{e.addEventListener(t,s),e.llEvLisnrs[t]=s},F=(e,t,s)=>{e.removeEventListener(t,s)},S=e=>!!e.llEvLisnrs,V=e=>{if(!S(e))return;const t=e.llEvLisnrs;for(let s in t){const a=t[s];F(e,s,a)}delete e.llEvLisnrs},$=(e,t,s)=>{(e=>{delete e.llTempImage})(e),E(s,-1),(e=>{e&&(e.toLoadCount-=1)})(s),m(e,t.class_loading),t.unobserve_completed&&f(e,s)},P=(e,t,s)=>{const a=v(e)||e;S(a)||((e,t,s)=>{S(e)||(e.llEvLisnrs={});const a="VIDEO"===e.tagName?"loadeddata":"load";D(e,a,t),D(e,"error",s)})(a,(l=>{((e,t,s,a)=>{const l=g(t);$(t,s,a),h(t,s.class_loaded),d(t,"loaded"),p(s.callback_loaded,t,a),l||T(s,a)})(0,e,t,s),V(a)}),(l=>{((e,t,s,a)=>{const l=g(t);$(t,s,a),h(t,s.class_error),d(t,"error"),p(s.callback_error,t,a),l||T(s,a)})(0,e,t,s),V(a)}))},U=(e,t,s)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),P(e,t,s),((e,t,s)=>{const a=o(e,t.data_bg),n=o(e,t.data_bg_hidpi),r=l&&n?n:a;r&&(e.style.backgroundImage=`url("${r}")`,v(e).setAttribute("src",r),R(e,t,s))})(e,t,s),((e,t,s)=>{const a=o(e,t.data_bg_multi),n=o(e,t.data_bg_multi_hidpi),r=l&&n?n:a;r&&(e.style.backgroundImage=r,((e,t,s)=>{h(e,t.class_applied),d(e,"applied"),t.unobserve_completed&&f(e,t),p(t.callback_applied,e,s)})(e,t,s))})(e,t,s)},j=(e,t,s)=>{(e=>G.indexOf(e.tagName)>-1)(e)?((e,t,s)=>{P(e,t,s),M(e,t),R(e,t,s)})(e,t,s):U(e,t,s)},q=["IMG","IFRAME"],H=e=>e.use_native&&"loading"in HTMLImageElement.prototype,B=(e,t,s)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,s,a)=>{const l=(e=>b.indexOf(c(e))>=0)(e);d(e,"entered"),h(e,s.class_entered),m(e,s.class_exited),((e,t,s)=>{t.unobserve_entered&&f(e,s)})(e,s,a),p(s.callback_enter,e,t,a),l||j(e,s,a)})(e.target,e,t,s):((e,t,s,a)=>{u(e)||(h(e,s.class_exited),((e,t,s,a)=>{s.cancel_on_exit&&(e=>"loading"===c(e))(e)&&"IMG"===e.tagName&&(V(e),(e=>{C(e,(e=>{z(e)})),z(e)})(e),(e=>{C(e,(e=>{y(e)})),y(e)})(e),m(e,s.class_loading),E(a,-1),_(e),p(s.callback_cancel,e,t,a))})(e,t,s,a),p(s.callback_exit,e,t,a))})(e.target,e,t,s)))},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(u))(e||K(t)),X=function(t,a){const l=r(t);this._settings=l,this.loadingCount=0,((e,t)=>{s&&!H(e)&&(t._observer=new IntersectionObserver((s=>{B(s,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,s)=>{e&&window.addEventListener("online",(()=>{((e,t)=>{var s;(s=K(e),J(s).filter(Q)).forEach((t=>{m(t,e.class_error),_(t)})),t.update()})(t,s)}))})(l,this),this.update(a)};X.prototype={update:function(e){const a=this._settings,l=W(e,a);var n,r;A(this,l.length),!t&&s?H(a)?((e,t,s)=>{e.forEach((e=>{-1!==q.indexOf(e.tagName)&&(e.setAttribute("loading","lazy"),((e,t,s)=>{P(e,t,s),M(e,t),d(e,"native")})(e,t,s))})),A(s,0)})(l,a,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 s=r(t);j(e,s)},X.resetStatus=e=>{_(e)},e&&((e,t)=>{if(t)if(t.length)for(let s,a=0;s=t[a];a+=1)i(e,s);else i(e,t)})(X,window.lazyLoadOptions);export default X; |
@@ -515,2 +515,6 @@ 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. */ | ||
| setStatus(element, statusEntered); | ||
@@ -521,4 +525,3 @@ addClass(element, settings.class_entered); | ||
| safeCallback(settings.callback_enter, element, entry, instance); | ||
| if (hadStartedLoading(element)) return; //Prevent loading it again | ||
| if (dontLoad) return; | ||
| load(element, settings, instance); | ||
@@ -525,0 +528,0 @@ }; |
@@ -1,1 +0,1 @@ | ||
| var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,r=n&&"classList"in document.createElement("p"),a=n&&window.devicePixelRatio>1,o={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",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},c=function(n){return t({},o,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)},x=function(t,n){t&&(t.toLoadCount=n)},C=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)}},D=function(t,n){N(t,"sizes",b(t,n.data_sizes)),N(t,"srcset",b(t,n.data_srcset)),N(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&&C(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){N(t,"src",b(t,n.data_src))},VIDEO:function(t,n){!function(t,e){C(t).forEach((function(t){N(t,"src",b(t,n.data_src))}))}(t),N(t,"poster",b(t,n.data_poster)),N(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),o=a&&r?r:i;o&&(t.style.backgroundImage='url("'.concat(o,'")'),k(t).setAttribute("src",o),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),o=a&&r?r:i;o&&(t.style.backgroundImage=o,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"),w(t,e.class_entered),y(t,e.class_exited),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)||(w(t,e.class_exited),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))},at=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 at.prototype={update:function(t){var n,r,a=this._settings,o=rt(t,a);x(this,o.length),!e&&i?Z(a)?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))})),x(e,0)}(o,a,this):(r=o,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,r)):this.loadAll(o)},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)}))}},at.load=function(t,n){var e=c(n);X(t,e)},at.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)}(at,window.lazyLoadOptions),at}(); | ||
| var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,r=n&&"classList"in document.createElement("p"),a=n&&window.devicePixelRatio>1,o={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",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},c=function(n){return t({},o,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",v="data-",g="ll-status",b=function(t,n){return t.getAttribute(v+n)},p=function(t){return b(t,g)},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)},x=function(t,n){t&&(t.toLoadCount=n)},C=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)}},D=function(t,n){N(t,"sizes",b(t,n.data_sizes)),N(t,"srcset",b(t,n.data_srcset)),N(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&&C(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){N(t,"src",b(t,n.data_src))},VIDEO:function(t,n){!function(t,e){C(t).forEach((function(t){N(t,"src",b(t,n.data_src))}))}(t),N(t,"poster",b(t,n.data_poster)),N(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),o=a&&r?r:i;o&&(t.style.backgroundImage='url("'.concat(o,'")'),k(t).setAttribute("src",o),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),o=a&&r?r:i;o&&(t.style.backgroundImage=o,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){var r=function(t){return I.indexOf(p(t))>=0}(t);h(t,"entered"),w(t,e.class_entered),y(t,e.class_exited),function(t,n,e){n.unobserve_entered&&O(t,e)}(t,e,i),L(e.callback_enter,t,n,i),r||X(t,e,i)}(t.target,t,n,e):function(t,n,e,i){E(t)||(w(t,e.class_exited),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))},at=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 at.prototype={update:function(t){var n,r,a=this._settings,o=rt(t,a);x(this,o.length),!e&&i?Z(a)?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))})),x(e,0)}(o,a,this):(r=o,function(t){t.disconnect()}(n=this._observer),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,r)):this.loadAll(o)},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)}))}},at.load=function(t,n){var e=c(n);X(t,e)},at.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)}(at,window.lazyLoadOptions),at}(); |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global = global || self, global.LazyLoad = factory()); | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.LazyLoad = factory()); | ||
| }(this, (function () { 'use strict'; | ||
@@ -518,2 +518,6 @@ | ||
| var onEnter = function onEnter(element, entry, settings, instance) { | ||
| var dontLoad = hadStartedLoading(element); | ||
| /* Save status | ||
| before setting it, to prevent loading it again. Fixes #526. */ | ||
| setStatus(element, statusEntered); | ||
@@ -524,4 +528,3 @@ addClass(element, settings.class_entered); | ||
| safeCallback(settings.callback_enter, element, entry, instance); | ||
| if (hadStartedLoading(element)) return; //Prevent loading it again | ||
| if (dontLoad) return; | ||
| load(element, settings, instance); | ||
@@ -528,0 +531,0 @@ }; |
@@ -1,1 +0,1 @@ | ||
| !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;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),r=n&&window.devicePixelRatio>1,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",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},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",d="applied",f="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,d,f],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)}},x=function(t,n){t&&(t.loadingCount+=n)},z=function(t,n){t&&(t.toLoadCount=n)},C=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&&C(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){C(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){x(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),x(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,f),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,d),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"),L(t,e.class_entered),w(t,e.class_exited),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)||(L(t,e.class_exited),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),x(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)===f}(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);z(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))})),z(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})); | ||
| !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),r=n&&window.devicePixelRatio>1,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",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},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",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)},y=function(t){return p(t)===_},A=[l,u,d,f],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)}},x=function(t,n){t&&(t.loadingCount+=n)},z=function(t,n){t&&(t.toLoadCount=n)},C=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},T=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}},G=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",b(t,n.data_sizes)),N(t,"srcset",b(t,n.data_srcset)),N(t,"src",b(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&&C(e).forEach(n)},P={IMG:function(t,n){F(t,(function(t){T(t),j(t,n)})),T(t),j(t,n)},IFRAME:function(t,n){N(t,"src",b(t,n.data_src))},VIDEO:function(t,n){!function(t,e){C(t).forEach((function(t){N(t,"src",b(t,n.data_src))}))}(t),N(t,"poster",b(t,n.data_poster)),N(t,"src",b(t,n.data_src)),t.load()}},S=function(t,n){var e=P[t.tagName];e&&e(t,n)},V=function(t,n,e){x(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),x(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,f),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=b(t,n.data_bg),o=b(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=b(t,n.data_bg_multi),o=b(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,d),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){var o=function(t){return A.indexOf(p(t))>=0}(t);h(t,"entered"),L(t,e.class_entered),w(t,e.class_exited),function(t,n,e){n.unobserve_entered&&O(t,e)}(t,e,i),I(e.callback_enter,t,n,i),o||X(t,e,i)}(t.target,t,n,e):function(t,n,e,i){E(t)||(L(t,e.class_exited),function(t,n,e,i){e.cancel_on_exit&&function(t){return p(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){G(t)})),G(t)}(t),w(t,e.class_loading),x(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 p(t)===f}(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);z(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))})),z(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})); |
| { | ||
| "name": "vanilla-lazyload", | ||
| "version": "17.3.1", | ||
| "version": "17.3.2", | ||
| "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.", | ||
@@ -10,10 +10,10 @@ "main": "dist/lazyload.min.js", | ||
| "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", | ||
| "@babel/core": "^7.13.14", | ||
| "@babel/plugin-transform-object-assign": "^7.12.13", | ||
| "@babel/preset-env": "^7.13.12", | ||
| "@rollup/plugin-babel": "^5.3.0", | ||
| "@rollup/plugin-node-resolve": "^11.2.1", | ||
| "jest": "^26.6.3", | ||
| "rollup": "^1.32.1", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-terser": "^7.0.0" | ||
| "rollup": "^2.44.0", | ||
| "rollup-plugin-terser": "^7.0.2" | ||
| }, | ||
@@ -20,0 +20,0 @@ "scripts": { |
@@ -156,3 +156,3 @@ 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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it optimizes your website for slower connections, and can enable native lazy loading. See [notable features](#-notable-features) for more. | ||
| The latest, recommended version of LazyLoad is **17.3.1**. | ||
| The latest, recommended version of LazyLoad is **17.3.2**. | ||
@@ -174,3 +174,3 @@ Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md). | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.2/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -182,3 +182,3 @@ | ||
| <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.2/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -215,3 +215,3 @@ | ||
| ```js | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.amd.min.js"; | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.2/dist/lazyload.amd.min.js"; | ||
| var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js"; | ||
@@ -261,3 +261,3 @@ | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.2/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -296,3 +296,3 @@ ``` | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.2/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -657,51 +657,10 @@ ``` | ||
| ### Occupy space and avoid content reflow | ||
| ### Minimize [CLS](https://web.dev/cls) by occupy space beforehand | ||
| It's a good idea to make sure that your lazy images occupy some space even **before they are loaded**, otherwise the `img` elements will be shrinked to zero-height, causing your layout to reflow and making lazyload inefficient. | ||
| It's very important to make sure that your lazy images occupy some space even **before they are loaded**, otherwise the `img` elements will be shrinked to zero-height, causing your layout to shift and making lazyload inefficient. | ||
| There are [many ways to avoid content reflow](https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/). I've [tested three of them](https://github.com/verlok/lazyload_placeholders_test) and found that the fastest is to **avoid using a placeholder at all**, and use the vertical padding trick. | ||
| The best way to do that is to set both `width` and `height` attributes to `img` and `video` elements and, if you choose not to use a placeholder image, apply the `display: block` CSS rule to every image. | ||
| #### Vertical padding trick | ||
| You can find more details and demos in my article [aspect-ratio: A modern way to reserve space for images and async content in responsive design](https://www.andreaverlicchi.eu/aspect-ratio-modern-reserve-space-lazy-images-async-content-responsive-design/). | ||
| ```html | ||
| <div class="image-wrapper"> | ||
| <img class="lazy image" alt="An image" data-src="lazy.jpg" /> | ||
| </div> | ||
| ``` | ||
| ```css | ||
| .image-wrapper { | ||
| width: 100%; | ||
| height: 0; | ||
| padding-bottom: 150%; | ||
| /* 👆 image height / width * 100% */ | ||
| position: relative; | ||
| } | ||
| .image { | ||
| width: 100%; | ||
| height: auto; | ||
| position: absolute; | ||
| } | ||
| ``` | ||
| More info in [Sizing Fluid Image Containers with a Little CSS Padding Hack](http://andyshora.com/css-image-container-padding-hack.html) by Andy Shora. Find also a useful [SASS mixin to maintain aspect ratio](https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/) on CSS tricks. | ||
| #### Inline SVG | ||
| If you can't use the vertical padding trick for some reason, the best option is to use an SVG placeholder of the same ratio of the lazy images. | ||
| ```html | ||
| <img | ||
| src="data:image/svg+xml,%3Csvg | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| viewBox='0 0 3 2'%3E%3C/svg%3E" | ||
| data-src="//picsum.photos/900/600" | ||
| alt="Lazy loading test image" | ||
| /> | ||
| ``` | ||
| Alternatively (but less efficiently) you can use a tiny, scaled-down version of your images as a placeholder, stretching them to the final size of the images, and obtain a blur-up effect when the full images load. | ||
| Using a placeholder image will also make sure that browsers don't show your `alt` content instead of the images before the lazy-loading starts. | ||
| --- | ||
@@ -708,0 +667,0 @@ |
No alert changes
Improved metrics
- Lines of code
2823
0.39%Worsened metrics
- Total package byte prevSize
215507
-0.25%- Number of lines in readme file
811
-4.81%No dependency changes