diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bf13fc..0388b95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Version 17 +#### 17.7.0 + +- Added the new option `restore_on_error` to restore original attributes on error. + #### 17.6.1 - Removed nasty "debugger" from code (sorry about that rookie mistake!) diff --git a/README.md b/README.md index ca4b174..c906127 100644 --- a/README.md +++ b/README.md @@ -159,7 +159,7 @@ Please note that the video poster can be lazily loaded too. ## 👩‍💻 Getting started - Script -The latest, recommended version of LazyLoad is **17.6.1**. +The latest, recommended version of LazyLoad is **17.7.0**. Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md). @@ -168,7 +168,7 @@ Quickly understand how to upgrade from a previous version reading the [practical The easiest way to use LazyLoad is to include the script from a CDN: ```html - + ``` Then, in your javascript code: @@ -209,7 +209,7 @@ Then include the script. ```html ``` @@ -243,7 +243,7 @@ Then include the script. ```html ``` @@ -600,6 +600,8 @@ The [demos](https://github.com/verlok/vanilla-lazyload/tree/master/demos) folder | Loading | Asynchronous loading LazyLoad + InterserctionObserver with requireJS | [Code](demos/amd_polyfill.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/amd_polyfill.html) | | Loading | Asynchronous loading LazyLoad with ` + + + diff --git a/demos/error_restore.html b/demos/error_restore.html new file mode 100644 index 0000000..c01bc22 --- /dev/null +++ b/demos/error_restore.html @@ -0,0 +1,531 @@ + + + + + + Error, restore - Lazyload demos + + + + + + +

Error, restore original attribute

+
+ +
+ + + + diff --git a/dist/lazyload.amd.js b/dist/lazyload.amd.js index 96b949e..7417b61 100644 --- a/dist/lazyload.amd.js +++ b/dist/lazyload.amd.js @@ -54,7 +54,8 @@ define(function () { 'use strict'; callback_error: null, callback_finish: null, callback_cancel: null, - use_native: false + use_native: false, + restore_on_error: false }; var getExtendedSettings = function getExtendedSettings(customSettings) { return _extends({}, defaultSettings, customSettings); @@ -497,6 +498,7 @@ define(function () { 'use strict'; addClass(element, settings.class_error); setStatus(element, statusError); safeCallback(settings.callback_error, element, instance); + if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes); if (!goingNative) checkFinish(settings, instance); }; var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) { diff --git a/dist/lazyload.amd.min.js b/dist/lazyload.amd.min.js index 343e213..b8730e0 100644 --- a/dist/lazyload.amd.min.js +++ b/dist/lazyload.amd.min.js @@ -1 +1 @@ -define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_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(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",A=function(n,t){return n.getAttribute(E+t)},k=function(n){return A(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},y=function(n){return w(n,null)},L=function(n){return null===k(n)},O=function(n){return k(n)===m},C=[v,b,p,h],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},B=[l],J=[l,d],P=[l,s,f],S=[g],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,f,A(n,t.data_sizes)),Q(n,s,A(n,t.data_srcset)),Q(n,l,A(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,P),W(n,t)})),q(n,P),W(n,t)},IFRAME:function(n,t){q(n,B),Q(n,l,A(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,B),Q(n,l,A(n,t.data_src))})),q(n,J),Q(n,d,A(n,t.data_poster)),Q(n,l,A(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,S),Q(n,g,A(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},on=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},an=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_loaded),w(t,b),x(e.callback_loaded,t,i),o||Z(e,i)}(0,n,t,e),on(i)}),(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_error),w(t,h),x(e.callback_error,t,i),o||Z(e,i)}(0,n,t,e),on(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=A(n,t.data_bg),o=A(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=A(n,t.data_bg_multi),o=A(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),w(n,p),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},sn=function(n){V(n,(function(n){H(n,P)})),H(n,P)},fn={IMG:sn,IFRAME:function(n){H(n,B)},VIDEO:function(n){F(n,(function(n){H(n,B)})),H(n,J),n.load()},OBJECT:function(n){H(n,S)}},dn=function(n,t){(function(n){var t=fn[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),y(n),$(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(k(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===v}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),y(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return k(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(L)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),y(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=mn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),w(n,m)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){dn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){y(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En})); +define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",A=function(n,t){return n.getAttribute(E+t)},k=function(n){return A(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},y=function(n){return w(n,null)},L=function(n){return null===k(n)},O=function(n){return k(n)===m},C=[v,b,p,h],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},B=[l],J=[l,d],P=[l,s,f],S=[g],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,f,A(n,t.data_sizes)),Q(n,s,A(n,t.data_srcset)),Q(n,l,A(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,P),W(n,t)})),q(n,P),W(n,t)},IFRAME:function(n,t){q(n,B),Q(n,l,A(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,B),Q(n,l,A(n,t.data_src))})),q(n,J),Q(n,d,A(n,t.data_poster)),Q(n,l,A(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,S),Q(n,g,A(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},on=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},an=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_loaded),w(t,b),x(e.callback_loaded,t,i),o||Z(e,i)}(0,n,t,e),on(i)}),(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_error),w(t,h),x(e.callback_error,t,i),e.restore_on_error&&H(t,P),o||Z(e,i)}(0,n,t,e),on(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=A(n,t.data_bg),o=A(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=A(n,t.data_bg_multi),o=A(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),w(n,p),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},sn=function(n){V(n,(function(n){H(n,P)})),H(n,P)},fn={IMG:sn,IFRAME:function(n){H(n,B)},VIDEO:function(n){F(n,(function(n){H(n,B)})),H(n,J),n.load()},OBJECT:function(n){H(n,S)}},dn=function(n,t){(function(n){var t=fn[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),y(n),$(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(k(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===v}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),y(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return k(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(L)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),y(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=mn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),w(n,m)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){dn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){y(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En})); diff --git a/dist/lazyload.esm.js b/dist/lazyload.esm.js index 6705121..8d0bf5b 100644 --- a/dist/lazyload.esm.js +++ b/dist/lazyload.esm.js @@ -40,7 +40,8 @@ const defaultSettings = { callback_error: null, callback_finish: null, callback_cancel: null, - use_native: false + use_native: false, + restore_on_error: false, }; const getExtendedSettings = (customSettings) => { @@ -461,6 +462,7 @@ const errorHandler = (event, element, settings, instance) => { addClass(element, settings.class_error); setStatus(element, statusError); safeCallback(settings.callback_error, element, instance); + if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes); if (!goingNative) checkFinish(settings, instance); }; diff --git a/dist/lazyload.esm.min.js b/dist/lazyload.esm.min.js index 5a354d9..131d8cc 100644 --- a/dist/lazyload.esm.min.js +++ b/dist/lazyload.esm.min.js @@ -1 +1 @@ -const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,s=e&&"classList"in document.createElement("p"),l=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_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},o=e=>Object.assign({},n,e),r=function(e,t){let a;const s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},i="src",c="llOriginalAttrs",d=(e,t)=>e.getAttribute("data-"+t),_=e=>d(e,"ll-status"),u=(e,t)=>((e,t,a)=>{var s="data-ll-status";null!==a?e.setAttribute(s,a):e.removeAttribute(s)})(e,0,t),g=e=>u(e,null),b=e=>null===_(e),p=e=>"native"===_(e),m=["loading","loaded","applied","error"],h=(e,t,a,s)=>{e&&(void 0===s?void 0===a?e(t):e(t,a):e(t,a,s))},v=(e,t)=>{s?e.classList.add(t):e.className+=(e.className?" ":"")+t},E=(e,t)=>{s?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},f=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},A=(e,t)=>{e&&(e.loadingCount+=t)},k=(e,t)=>{e&&(e.toLoadCount=t)},w=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},L=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&w(a).forEach(t)},y=(e,t)=>{w(e).forEach(t)},O=[i],x=[i,"poster"],C=[i,"srcset","sizes"],N=["data"],M=e=>!!e[c],z=e=>e[c],R=e=>delete e[c],T=(e,t)=>{if(M(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[c]=a},G=(e,t)=>{if(!M(e))return;const a=z(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},D=(e,t,a)=>{v(e,t.class_loading),u(e,"loading"),a&&(A(a,1),h(t.callback_loading,e,a))},V=(e,t,a)=>{a&&e.setAttribute(t,a)},F=(e,t)=>{V(e,"sizes",d(e,t.data_sizes)),V(e,"srcset",d(e,t.data_srcset)),V(e,i,d(e,t.data_src))},B={IMG:(e,t)=>{L(e,(e=>{T(e,C),F(e,t)})),T(e,C),F(e,t)},IFRAME:(e,t)=>{T(e,O),V(e,i,d(e,t.data_src))},VIDEO:(e,t)=>{y(e,(e=>{T(e,O),V(e,i,d(e,t.data_src))})),T(e,x),V(e,"poster",d(e,t.data_poster)),V(e,i,d(e,t.data_src)),e.load()},OBJECT:(e,t)=>{T(e,N),V(e,"data",d(e,t.data_src))}},J=["IMG","IFRAME","VIDEO","OBJECT"],S=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},$=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},P=(e,t,a)=>{e.removeEventListener(t,a)},U=e=>!!e.llEvLisnrs,j=e=>{if(!U(e))return;const t=e.llEvLisnrs;for(let a in t){const s=t[a];P(e,a,s)}delete e.llEvLisnrs},q=(e,t,a)=>{(e=>{delete e.llTempImage})(e),A(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),E(e,t.class_loading),t.unobserve_completed&&I(e,a)},H=(e,t,a)=>{const s=f(e)||e;U(s)||((e,t,a)=>{U(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";$(e,s,t),$(e,"error",a)})(s,(l=>{((e,t,a,s)=>{const l=p(t);q(t,a,s),v(t,a.class_loaded),u(t,"loaded"),h(a.callback_loaded,t,s),l||S(a,s)})(0,e,t,a),j(s)}),(l=>{((e,t,a,s)=>{const l=p(t);q(t,a,s),v(t,a.class_error),u(t,"error"),h(a.callback_error,t,s),l||S(a,s)})(0,e,t,a),j(s)}))},K=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),H(e,t,a),(e=>{M(e)||(e[c]={backgroundImage:e.style.backgroundImage})})(e),((e,t,a)=>{const s=d(e,t.data_bg),n=d(e,t.data_bg_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=`url("${o}")`,f(e).setAttribute(i,o),D(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_multi),n=d(e,t.data_bg_multi_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=o,((e,t,a)=>{v(e,t.class_applied),u(e,"applied"),a&&(t.unobserve_completed&&I(e,t),h(t.callback_applied,e,a))})(e,t,a))})(e,t,a)},Q=(e,t,a)=>{(e=>J.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{H(e,t,a),((e,t,a)=>{const s=B[e.tagName];s&&(s(e,t),D(e,t,a))})(e,t,a)})(e,t,a):K(e,t,a)},W=e=>{e.removeAttribute(i),e.removeAttribute("srcset"),e.removeAttribute("sizes")},X=e=>{L(e,(e=>{G(e,C)})),G(e,C)},Y={IMG:X,IFRAME:e=>{G(e,O)},VIDEO:e=>{y(e,(e=>{G(e,O)})),G(e,x),e.load()},OBJECT:e=>{G(e,N)}},Z=(e,t)=>{(e=>{const t=Y[e.tagName];t?t(e):(e=>{if(!M(e))return;const t=z(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{b(e)||p(e)||(E(e,t.class_entered),E(e,t.class_exited),E(e,t.class_applied),E(e,t.class_loading),E(e,t.class_loaded),E(e,t.class_error))})(e,t),g(e),R(e)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,ae=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{const l=(e=>m.indexOf(_(e))>=0)(e);u(e,"entered"),v(e,a.class_entered),E(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&I(e,a)})(e,a,s),h(a.callback_enter,e,t,s),l||Q(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{b(e)||(v(e,a.class_exited),((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===_(e))(e)&&"IMG"===e.tagName&&(j(e),(e=>{L(e,(e=>{W(e)})),W(e)})(e),X(e),E(e,a.class_loading),A(s,-1),g(e),h(a.callback_cancel,e,t,s))})(e,t,a,s),h(a.callback_exit,e,t,s))})(e.target,e,t,a)))},se=e=>Array.prototype.slice.call(e),le=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===_(e))(e),oe=(e,t)=>(e=>se(e).filter(b))(e||le(t)),re=function(t,s){const l=o(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!te(e)&&(t._observer=new IntersectionObserver((a=>{ae(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&window.addEventListener("online",(()=>{((e,t)=>{var a;(a=le(e),se(a).filter(ne)).forEach((t=>{E(t,e.class_error),g(t)})),t.update()})(t,a)}))})(l,this),this.update(s)};re.prototype={update:function(e){const s=this._settings,l=oe(e,s);var n,o;k(this,l.length),!t&&a?te(s)?((e,t,a)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),H(e,t,a),((e,t)=>{const a=B[e.tagName];a&&a(e,t)})(e,t),u(e,"native")})(e,t,a)})),k(a,0)})(l,s,this):(o=l,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(n,o)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),le(this._settings).forEach((e=>{R(e)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;oe(e,t).forEach((e=>{I(e,this),Q(e,t,this)}))},restoreAll:function(){const e=this._settings;le(e).forEach((t=>{Z(t,e)}))}},re.load=(e,t)=>{const a=o(t);Q(e,a)},re.resetStatus=e=>{g(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,s=0;a=t[s];s+=1)r(e,a);else r(e,t)})(re,window.lazyLoadOptions);export{re as default}; +const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,s=e&&"classList"in document.createElement("p"),l=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},r=e=>Object.assign({},n,e),o=function(e,t){let a;const s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},i="src",c="llOriginalAttrs",d=(e,t)=>e.getAttribute("data-"+t),_=e=>d(e,"ll-status"),u=(e,t)=>((e,t,a)=>{var s="data-ll-status";null!==a?e.setAttribute(s,a):e.removeAttribute(s)})(e,0,t),g=e=>u(e,null),b=e=>null===_(e),p=e=>"native"===_(e),m=["loading","loaded","applied","error"],h=(e,t,a,s)=>{e&&(void 0===s?void 0===a?e(t):e(t,a):e(t,a,s))},v=(e,t)=>{s?e.classList.add(t):e.className+=(e.className?" ":"")+t},E=(e,t)=>{s?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},f=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},A=(e,t)=>{e&&(e.loadingCount+=t)},k=(e,t)=>{e&&(e.toLoadCount=t)},w=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},L=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&w(a).forEach(t)},y=(e,t)=>{w(e).forEach(t)},O=[i],x=[i,"poster"],C=[i,"srcset","sizes"],N=["data"],M=e=>!!e[c],z=e=>e[c],R=e=>delete e[c],T=(e,t)=>{if(M(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[c]=a},G=(e,t)=>{if(!M(e))return;const a=z(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},D=(e,t,a)=>{v(e,t.class_loading),u(e,"loading"),a&&(A(a,1),h(t.callback_loading,e,a))},V=(e,t,a)=>{a&&e.setAttribute(t,a)},F=(e,t)=>{V(e,"sizes",d(e,t.data_sizes)),V(e,"srcset",d(e,t.data_srcset)),V(e,i,d(e,t.data_src))},B={IMG:(e,t)=>{L(e,(e=>{T(e,C),F(e,t)})),T(e,C),F(e,t)},IFRAME:(e,t)=>{T(e,O),V(e,i,d(e,t.data_src))},VIDEO:(e,t)=>{y(e,(e=>{T(e,O),V(e,i,d(e,t.data_src))})),T(e,x),V(e,"poster",d(e,t.data_poster)),V(e,i,d(e,t.data_src)),e.load()},OBJECT:(e,t)=>{T(e,N),V(e,"data",d(e,t.data_src))}},J=["IMG","IFRAME","VIDEO","OBJECT"],S=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},$=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},P=(e,t,a)=>{e.removeEventListener(t,a)},U=e=>!!e.llEvLisnrs,j=e=>{if(!U(e))return;const t=e.llEvLisnrs;for(let a in t){const s=t[a];P(e,a,s)}delete e.llEvLisnrs},q=(e,t,a)=>{(e=>{delete e.llTempImage})(e),A(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),E(e,t.class_loading),t.unobserve_completed&&I(e,a)},H=(e,t,a)=>{const s=f(e)||e;U(s)||((e,t,a)=>{U(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";$(e,s,t),$(e,"error",a)})(s,(l=>{((e,t,a,s)=>{const l=p(t);q(t,a,s),v(t,a.class_loaded),u(t,"loaded"),h(a.callback_loaded,t,s),l||S(a,s)})(0,e,t,a),j(s)}),(l=>{((e,t,a,s)=>{const l=p(t);q(t,a,s),v(t,a.class_error),u(t,"error"),h(a.callback_error,t,s),a.restore_on_error&&G(t,C),l||S(a,s)})(0,e,t,a),j(s)}))},K=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),H(e,t,a),(e=>{M(e)||(e[c]={backgroundImage:e.style.backgroundImage})})(e),((e,t,a)=>{const s=d(e,t.data_bg),n=d(e,t.data_bg_hidpi),r=l&&n?n:s;r&&(e.style.backgroundImage=`url("${r}")`,f(e).setAttribute(i,r),D(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_multi),n=d(e,t.data_bg_multi_hidpi),r=l&&n?n:s;r&&(e.style.backgroundImage=r,((e,t,a)=>{v(e,t.class_applied),u(e,"applied"),a&&(t.unobserve_completed&&I(e,t),h(t.callback_applied,e,a))})(e,t,a))})(e,t,a)},Q=(e,t,a)=>{(e=>J.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{H(e,t,a),((e,t,a)=>{const s=B[e.tagName];s&&(s(e,t),D(e,t,a))})(e,t,a)})(e,t,a):K(e,t,a)},W=e=>{e.removeAttribute(i),e.removeAttribute("srcset"),e.removeAttribute("sizes")},X=e=>{L(e,(e=>{G(e,C)})),G(e,C)},Y={IMG:X,IFRAME:e=>{G(e,O)},VIDEO:e=>{y(e,(e=>{G(e,O)})),G(e,x),e.load()},OBJECT:e=>{G(e,N)}},Z=(e,t)=>{(e=>{const t=Y[e.tagName];t?t(e):(e=>{if(!M(e))return;const t=z(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{b(e)||p(e)||(E(e,t.class_entered),E(e,t.class_exited),E(e,t.class_applied),E(e,t.class_loading),E(e,t.class_loaded),E(e,t.class_error))})(e,t),g(e),R(e)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,ae=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{const l=(e=>m.indexOf(_(e))>=0)(e);u(e,"entered"),v(e,a.class_entered),E(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&I(e,a)})(e,a,s),h(a.callback_enter,e,t,s),l||Q(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{b(e)||(v(e,a.class_exited),((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===_(e))(e)&&"IMG"===e.tagName&&(j(e),(e=>{L(e,(e=>{W(e)})),W(e)})(e),X(e),E(e,a.class_loading),A(s,-1),g(e),h(a.callback_cancel,e,t,s))})(e,t,a,s),h(a.callback_exit,e,t,s))})(e.target,e,t,a)))},se=e=>Array.prototype.slice.call(e),le=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===_(e))(e),re=(e,t)=>(e=>se(e).filter(b))(e||le(t)),oe=function(t,s){const l=r(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!te(e)&&(t._observer=new IntersectionObserver((a=>{ae(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&window.addEventListener("online",(()=>{((e,t)=>{var a;(a=le(e),se(a).filter(ne)).forEach((t=>{E(t,e.class_error),g(t)})),t.update()})(t,a)}))})(l,this),this.update(s)};oe.prototype={update:function(e){const s=this._settings,l=re(e,s);var n,r;k(this,l.length),!t&&a?te(s)?((e,t,a)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),H(e,t,a),((e,t)=>{const a=B[e.tagName];a&&a(e,t)})(e,t),u(e,"native")})(e,t,a)})),k(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(),le(this._settings).forEach((e=>{R(e)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;re(e,t).forEach((e=>{I(e,this),Q(e,t,this)}))},restoreAll:function(){const e=this._settings;le(e).forEach((t=>{Z(t,e)}))}},oe.load=(e,t)=>{const a=r(t);Q(e,a)},oe.resetStatus=e=>{g(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,s=0;a=t[s];s+=1)o(e,a);else o(e,t)})(oe,window.lazyLoadOptions);export{oe as default}; diff --git a/dist/lazyload.iife.js b/dist/lazyload.iife.js index 65b0f5d..d77e210 100644 --- a/dist/lazyload.iife.js +++ b/dist/lazyload.iife.js @@ -55,7 +55,8 @@ var LazyLoad = (function () { callback_error: null, callback_finish: null, callback_cancel: null, - use_native: false + use_native: false, + restore_on_error: false }; var getExtendedSettings = function getExtendedSettings(customSettings) { return _extends({}, defaultSettings, customSettings); @@ -498,6 +499,7 @@ var LazyLoad = (function () { addClass(element, settings.class_error); setStatus(element, statusError); safeCallback(settings.callback_error, element, instance); + if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes); if (!goingNative) checkFinish(settings, instance); }; var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) { diff --git a/dist/lazyload.iife.min.js b/dist/lazyload.iife.min.js index 8d7fd85..ffdc62c 100644 --- a/dist/lazyload.iife.min.js +++ b/dist/lazyload.iife.min.js @@ -1 +1 @@ -var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_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(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",a=new n(t);try{e=new CustomEvent(i,{detail:{instance:a}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:a})}window.dispatchEvent(e)},l="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",v="data",g="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",A=function(n,t){return n.getAttribute(E+t)},k=function(n){return A(n,I)},y=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},L=function(n){return y(n,null)},w=function(n){return null===k(n)},O=function(n){return k(n)===m},C=[g,b,p,h],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=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+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},B=[l],J=[l,f],P=[l,s,d],S=[v],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),y(n,g),e&&(T(e,1),x(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,d,A(n,t.data_sizes)),Q(n,s,A(n,t.data_srcset)),Q(n,l,A(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,P),W(n,t)})),q(n,P),W(n,t)},IFRAME:function(n,t){q(n,B),Q(n,l,A(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,B),Q(n,l,A(n,t.data_src))})),q(n,J),Q(n,f,A(n,t.data_poster)),Q(n,l,A(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,S),Q(n,v,A(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},an=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},on=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=O(t);on(t,e,i),N(t,e.class_loaded),y(t,b),x(e.callback_loaded,t,i),a||Z(e,i)}(0,n,t,e),an(i)}),(function(a){!function(n,t,e,i){var a=O(t);on(t,e,i),N(t,e.class_error),y(t,h),x(e.callback_error,t,i),a||Z(e,i)}(0,n,t,e),an(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=A(n,t.data_bg),a=A(n,t.data_bg_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=A(n,t.data_bg_multi),a=A(n,t.data_bg_multi_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),y(n,p),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){V(n,(function(n){H(n,P)})),H(n,P)},dn={IMG:sn,IFRAME:function(n){H(n,B)},VIDEO:function(n){F(n,(function(n){H(n,B)})),H(n,J),n.load()},OBJECT:function(n){H(n,S)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){w(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),L(n),$(n)},_n=["IMG","IFRAME","VIDEO"],vn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},gn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var a=function(n){return C.indexOf(k(n))>=0}(n);y(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),a||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){w(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===g}(n)&&"IMG"===n.tagName&&(an(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),L(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return k(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(w)}(n||pn(t))},En=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!vn(n)&&(t._observer=new IntersectionObserver((function(e){gn(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=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),L(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return En.prototype={update:function(n){var t,a,o=this._settings,r=mn(n,o);G(this,r.length),!e&&i?vn(o)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),y(n,m)}(n,t,e)})),G(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(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){L(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En}(); +var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",v="data",g="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",A=function(n,t){return n.getAttribute(E+t)},k=function(n){return A(n,I)},y=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},L=function(n){return y(n,null)},w=function(n){return null===k(n)},O=function(n){return k(n)===m},C=[g,b,p,h],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},B=[l],J=[l,f],P=[l,s,d],S=[v],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),y(n,g),e&&(T(e,1),x(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,d,A(n,t.data_sizes)),Q(n,s,A(n,t.data_srcset)),Q(n,l,A(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,P),W(n,t)})),q(n,P),W(n,t)},IFRAME:function(n,t){q(n,B),Q(n,l,A(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,B),Q(n,l,A(n,t.data_src))})),q(n,J),Q(n,f,A(n,t.data_poster)),Q(n,l,A(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,S),Q(n,v,A(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},on=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},an=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_loaded),y(t,b),x(e.callback_loaded,t,i),o||Z(e,i)}(0,n,t,e),on(i)}),(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_error),y(t,h),x(e.callback_error,t,i),e.restore_on_error&&H(t,P),o||Z(e,i)}(0,n,t,e),on(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=A(n,t.data_bg),o=A(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=A(n,t.data_bg_multi),o=A(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),y(n,p),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){V(n,(function(n){H(n,P)})),H(n,P)},dn={IMG:sn,IFRAME:function(n){H(n,B)},VIDEO:function(n){F(n,(function(n){H(n,B)})),H(n,J),n.load()},OBJECT:function(n){H(n,S)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){w(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),L(n),$(n)},_n=["IMG","IFRAME","VIDEO"],vn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},gn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(k(n))>=0}(n);y(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){w(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===g}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),L(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return k(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(w)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!vn(n)&&(t._observer=new IntersectionObserver((function(e){gn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),L(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=mn(n,a);G(this,r.length),!e&&i?vn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),y(n,m)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){L(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En}(); diff --git a/dist/lazyload.js b/dist/lazyload.js index aad322b..d5ba617 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -58,7 +58,8 @@ callback_error: null, callback_finish: null, callback_cancel: null, - use_native: false + use_native: false, + restore_on_error: false }; var getExtendedSettings = function getExtendedSettings(customSettings) { return _extends({}, defaultSettings, customSettings); @@ -501,6 +502,7 @@ addClass(element, settings.class_error); setStatus(element, statusError); safeCallback(settings.callback_error, element, instance); + if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes); if (!goingNative) checkFinish(settings, instance); }; var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) { diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index 906824c..891990f 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_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(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",y=function(n,t){return n.getAttribute(E+t)},A=function(n){return y(n,I)},k=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},L=function(n){return k(n,null)},w=function(n){return null===A(n)},O=function(n){return A(n)===m},x=[v,b,p,h],C=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},T=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},j=[l],B=[l,d],J=[l,s,f],P=[g],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),k(n,v),e&&(R(e,1),C(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,f,y(n,t.data_sizes)),Q(n,s,y(n,t.data_srcset)),Q(n,l,y(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,J),W(n,t)})),q(n,J),W(n,t)},IFRAME:function(n,t){q(n,j),Q(n,l,y(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,j),Q(n,l,y(n,t.data_src))})),q(n,B),Q(n,d,y(n,t.data_poster)),Q(n,l,y(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,P),Q(n,g,y(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||C(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},on=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},an=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&T(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_loaded),k(t,b),C(e.callback_loaded,t,i),o||Z(e,i)}(0,n,t,e),on(i)}),(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_error),k(t,h),C(e.callback_error,t,i),o||Z(e,i)}(0,n,t,e),on(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=y(n,t.data_bg),o=y(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=y(n,t.data_bg_multi),o=y(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),k(n,p),e&&(t.unobserve_completed&&T(n,t),C(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},sn=function(n){V(n,(function(n){H(n,J)})),H(n,J)},fn={IMG:sn,IFRAME:function(n){H(n,j)},VIDEO:function(n){F(n,(function(n){H(n,j)})),H(n,B),n.load()},OBJECT:function(n){H(n,P)}},dn=function(n,t){(function(n){var t=fn[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){w(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),L(n),$(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(A(n))>=0}(n);k(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&T(n,e)}(n,e,i),C(e.callback_enter,n,t,i),o||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){w(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return A(n)===v}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),R(i,-1),L(n),C(e.callback_cancel,n,t,i))}(n,t,e,i),C(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return A(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(w)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),L(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=mn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),k(n,m)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){T(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){dn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){L(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En})); +!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,o="LazyLoad::Initialized",i=new n(t);try{e=new CustomEvent(o,{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(o,!1,!1,{instance:i})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",y=function(n,t){return n.getAttribute(E+t)},A=function(n){return y(n,I)},k=function(n,t){return function(n,t,e){var o="data-ll-status";null!==e?n.setAttribute(o,e):n.removeAttribute(o)}(n,0,t)},L=function(n){return k(n,null)},w=function(n){return null===A(n)},O=function(n){return A(n)===m},x=[v,b,p,h],C=function(n,t,e,o){n&&(void 0===o?void 0===e?n(t):n(t,e):n(t,e,o))},N=function(n,t){i?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){i?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},T=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],o=0;t=n.children[o];o+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},j=[l],B=[l,d],J=[l,s,f],P=[g],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),k(n,v),e&&(R(e,1),C(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,f,y(n,t.data_sizes)),Q(n,s,y(n,t.data_srcset)),Q(n,l,y(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,J),W(n,t)})),q(n,J),W(n,t)},IFRAME:function(n,t){q(n,j),Q(n,l,y(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,j),Q(n,l,y(n,t.data_src))})),q(n,B),Q(n,d,y(n,t.data_poster)),Q(n,l,y(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,P),Q(n,g,y(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||C(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},on=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var o=t[e];tn(n,e,o)}delete n.llEvLisnrs}},an=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&T(n,e)},rn=function(n,t,e){var o=z(n)||n;en(o)||function(n,t,e){en(n)||(n.llEvLisnrs={});var o="VIDEO"===n.tagName?"loadeddata":"load";nn(n,o,t),nn(n,"error",e)}(o,(function(i){!function(n,t,e,o){var i=O(t);an(t,e,o),N(t,e.class_loaded),k(t,b),C(e.callback_loaded,t,o),i||Z(e,o)}(0,n,t,e),on(o)}),(function(i){!function(n,t,e,o){var i=O(t);an(t,e,o),N(t,e.class_error),k(t,h),C(e.callback_error,t,o),e.restore_on_error&&H(t,J),i||Z(e,o)}(0,n,t,e),on(o)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var o=y(n,t.data_bg),i=y(n,t.data_bg_hidpi),r=a&&i?i:o;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var o=y(n,t.data_bg_multi),i=y(n,t.data_bg_multi_hidpi),r=a&&i?i:o;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),k(n,p),e&&(t.unobserve_completed&&T(n,t),C(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var o=X[n.tagName];o&&(o(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},sn=function(n){V(n,(function(n){H(n,J)})),H(n,J)},fn={IMG:sn,IFRAME:function(n){H(n,j)},VIDEO:function(n){F(n,(function(n){H(n,j)})),H(n,B),n.load()},OBJECT:function(n){H(n,P)}},dn=function(n,t){(function(n){var t=fn[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){w(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),L(n),$(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,o){var i=function(n){return x.indexOf(A(n))>=0}(n);k(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&T(n,e)}(n,e,o),C(e.callback_enter,n,t,o),i||un(n,e,o)}(n.target,n,t,e):function(n,t,e,o){w(n)||(N(n,e.class_exited),function(n,t,e,o){e.cancel_on_exit&&function(n){return A(n)===v}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),R(o,-1),L(n),C(e.callback_cancel,n,t,o))}(n,t,e,o),C(e.callback_exit,n,t,o))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return A(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(w)}(n||pn(t))},En=function(n,e){var i=c(n);this._settings=i,this.loadingCount=0,function(n,t){o&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(i,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),L(t)})),t.update()}(n,e)}))}(i,this),this.update(e)};return En.prototype={update:function(n){var t,i,a=this._settings,r=mn(n,a);G(this,r.length),!e&&o?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),k(n,m)}(n,t,e)})),G(e,0)}(r,a,this):(i=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,i)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){T(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){dn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){L(n)},t&&function(n,t){if(t)if(t.length)for(var e,o=0;e=t[o];o+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En})); diff --git a/package-lock.json b/package-lock.json index 7f1f808..bc60648 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2937,14 +2937,20 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001259", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001259.tgz", - "integrity": "sha512-V7mQTFhjITxuk9zBpI6nYsiTXhcPe05l+364nZjK7MFK/E7ibvYBSAXr4YcA6oPR8j3ZLM/LN+lUqUVAQEUZFg==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } + "version": "1.0.30001327", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001327.tgz", + "integrity": "sha512-1/Cg4jlD9qjZzhbzkzEaAC2JHsP0WrOc8Rd/3a3LuajGzGWR/hD7TVyvq99VqmTy99eVh8Zkmdq213OgvgXx7w==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] }, "node_modules/chalk": { "version": "2.4.2", @@ -9255,9 +9261,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001259", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001259.tgz", - "integrity": "sha512-V7mQTFhjITxuk9zBpI6nYsiTXhcPe05l+364nZjK7MFK/E7ibvYBSAXr4YcA6oPR8j3ZLM/LN+lUqUVAQEUZFg==", + "version": "1.0.30001327", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001327.tgz", + "integrity": "sha512-1/Cg4jlD9qjZzhbzkzEaAC2JHsP0WrOc8Rd/3a3LuajGzGWR/hD7TVyvq99VqmTy99eVh8Zkmdq213OgvgXx7w==", "dev": true }, "chalk": { diff --git a/package.json b/package.json index 8e4828d..03c7404 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-lazyload", - "version": "17.6.1", + "version": "17.7.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", diff --git a/src/defaults.js b/src/defaults.js index d04f3a7..a12eac7 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -30,7 +30,8 @@ const defaultSettings = { callback_error: null, callback_finish: null, callback_cancel: null, - use_native: false + use_native: false, + restore_on_error: false, }; export const getExtendedSettings = (customSettings) => { diff --git a/src/event.js b/src/event.js index e10844b..1213f6f 100644 --- a/src/event.js +++ b/src/event.js @@ -10,6 +10,7 @@ import { haveElementsToLoad, isSomethingLoading } from "./counters"; +import { attrsSrcSrcsetSizes, restoreOriginalAttrs } from "./originalAttributes"; const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"]; export const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1; @@ -77,6 +78,7 @@ export const errorHandler = (event, element, settings, instance) => { addClass(element, settings.class_error); setStatus(element, statusError); safeCallback(settings.callback_error, element, instance); + if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes); if (!goingNative) checkFinish(settings, instance); };