Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vanilla-lazyload

Package Overview
Dependencies
Maintainers
1
Versions
148
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vanilla-lazyload - npm Package Compare versions

Comparing version 17.7.0 to 17.8.1

24

dist/lazyload.amd.js

@@ -39,2 +39,3 @@ define(function () { 'use strict';

data_bg_multi_hidpi: "bg-multi-hidpi",
data_bg_set: "bg-set",
data_poster: "poster",

@@ -413,2 +414,24 @@ class_applied: "applied",

};
var setImgsetBackground = function setImgsetBackground(element, settings, instance) {
var bgImgSetDataValue = getData(element, settings.data_bg_set);
if (!bgImgSetDataValue) {
return;
}
var imgSetValues = bgImgSetDataValue.split("|");
var bgImageValues = imgSetValues.map(function (value) {
return "image-set(".concat(value, ")");
});
element.style.backgroundImage = bgImageValues.join(); // Temporary fix for Chromeium with the -webkit- prefix
if (element.style.backgroundImage === '') {
bgImageValues = imgSetValues.map(function (value) {
return "-webkit-image-set(".concat(value, ")");
});
element.style.backgroundImage = bgImageValues.join();
}
manageApplied(element, settings, instance);
};
var setSourcesFunctions = {

@@ -533,2 +556,3 @@ IMG: setSourcesImg,

setMultiBackground(element, settings, instance);
setImgsetBackground(element, settings, instance);
};

@@ -535,0 +559,0 @@

2

dist/lazyload.amd.min.js

@@ -1,1 +0,1 @@

define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,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}));
define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,a=t&&"classList"in document.createElement("p"),o=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_bg_set:"bg-set",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},c=function(t){return n({},r,t)},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",g="data",v="loading",b="loaded",m="applied",p="error",h="native",E="data-",I="ll-status",k=function(n,t){return n.getAttribute(E+t)},y=function(n){return k(n,I)},A=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)},w=function(n){return A(n,null)},L=function(n){return null===y(n)},O=function(n){return y(n)===h},C=[v,b,m,p],x=function(n,t,e,i){n&&(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)},j=function(n,t){D(n).forEach(t)},F=[l],B=[l,f],J=[l,s,d],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_applied),A(n,m),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),A(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,k(n,t.data_sizes)),W(n,s,k(n,t.data_srcset)),W(n,l,k(n,t.data_src))},Y={IMG:function(n,t){V(n,(function(n){q(n,J),X(n,t)})),q(n,J),X(n,t)},IFRAME:function(n,t){q(n,F),W(n,l,k(n,t.data_src))},VIDEO:function(n,t){j(n,(function(n){q(n,F),W(n,l,k(n,t.data_src))})),q(n,B),W(n,f,k(n,t.data_poster)),W(n,l,k(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,P),W(n,g,k(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},an=function(n){return!!n.llEvLisnrs},on=function(n){if(an(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];en(n,e,i)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},cn=function(n,t,e){var i=z(n)||n;an(i)||function(n,t,e){an(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";tn(n,i,t),tn(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=O(t);rn(t,e,i),N(t,e.class_loaded),A(t,b),x(e.callback_loaded,t,i),a||nn(e,i)}(0,n,t,e),on(i)}),(function(a){!function(n,t,e,i){var a=O(t);rn(t,e,i),N(t,e.class_error),A(t,p),x(e.callback_error,t,i),e.restore_on_error&&H(t,J),a||nn(e,i)}(0,n,t,e),on(i)}))},un=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=k(n,t.data_bg),a=k(n,t.data_bg_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),Q(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_multi),a=k(n,t.data_bg_multi_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var i=k(n,t.data_bg_set);if(i){var a=i.split("|"),o=a.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=o.join(),""===n.style.backgroundImage&&(o=a.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=o.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var i=Y[n.tagName];i&&(i(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){V(n,(function(n){H(n,J)})),H(n,J)},dn={IMG:sn,IFRAME:function(n){H(n,F)},VIDEO:function(n){j(n,(function(n){H(n,F)})),H(n,B),n.load()},OBJECT:function(n){H(n,P)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(S(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),w(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 a=function(n){return C.indexOf(y(n))>=0}(n);A(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){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===v}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),w(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},mn=function(n){return n.container.querySelectorAll(n.elements_selector)},pn=function(n){return function(n){return y(n)===p}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||mn(t))},En=function(n,e){var a=c(n);this._settings=a,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)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=mn(n),bn(e).filter(pn)).forEach((function(t){M(t,n.class_error),w(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return En.prototype={update:function(n){var t,a,o=this._settings,r=hn(n,o);G(this,r.length),!e&&i?gn(o)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(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(),mn(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;hn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;mn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){w(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}));

18

dist/lazyload.esm.js

@@ -25,2 +25,3 @@ const runningOnBrowser = typeof window !== "undefined";

data_bg_multi_hidpi: "bg-multi-hidpi",
data_bg_set: "bg-set",
data_poster: "poster",

@@ -376,2 +377,18 @@ class_applied: "applied",

const setImgsetBackground = (element, settings, instance) => {
const bgImgSetDataValue = getData(element, settings.data_bg_set);
if (!bgImgSetDataValue) {
return;
}
const imgSetValues = bgImgSetDataValue.split("|");
let bgImageValues = imgSetValues.map((value) => `image-set(${value})`);
element.style.backgroundImage = bgImageValues.join();
// Temporary fix for Chromeium with the -webkit- prefix
if (element.style.backgroundImage === '') {
bgImageValues = imgSetValues.map((value) => `-webkit-image-set(${value})`);
element.style.backgroundImage = bgImageValues.join();
}
manageApplied(element, settings, instance);
};
const setSourcesFunctions = {

@@ -494,2 +511,3 @@ IMG: setSourcesImg,

setMultiBackground(element, settings, instance);
setImgsetBackground(element, settings, instance);
};

@@ -496,0 +514,0 @@

2

dist/lazyload.esm.min.js

@@ -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),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};
const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,s=e&&"classList"in document.createElement("p"),l=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_bg_set:"bg-set",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},o=e=>Object.assign({},n,e),r=function(e,t){let a;const s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},i="src",c="llOriginalAttrs",d=(e,t)=>e.getAttribute("data-"+t),_=e=>d(e,"ll-status"),u=(e,t)=>((e,t,a)=>{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),m=e=>"native"===_(e),p=["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)},k=(e,t)=>{e&&(e.loadingCount+=t)},A=(e,t)=>{e&&(e.toLoadCount=t)},w=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},y=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&w(a).forEach(t)},L=(e,t)=>{w(e).forEach(t)},O=[i],x=[i,"poster"],C=[i,"srcset","sizes"],N=["data"],M=e=>!!e[c],z=e=>e[c],R=e=>delete e[c],T=(e,t)=>{if(M(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[c]=a},G=(e,t)=>{if(!M(e))return;const a=z(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},D=(e,t,a)=>{v(e,t.class_applied),u(e,"applied"),a&&(t.unobserve_completed&&I(e,t),h(t.callback_applied,e,a))},V=(e,t,a)=>{v(e,t.class_loading),u(e,"loading"),a&&(k(a,1),h(t.callback_loading,e,a))},$=(e,t,a)=>{a&&e.setAttribute(t,a)},F=(e,t)=>{$(e,"sizes",d(e,t.data_sizes)),$(e,"srcset",d(e,t.data_srcset)),$(e,i,d(e,t.data_src))},j={IMG:(e,t)=>{y(e,(e=>{T(e,C),F(e,t)})),T(e,C),F(e,t)},IFRAME:(e,t)=>{T(e,O),$(e,i,d(e,t.data_src))},VIDEO:(e,t)=>{L(e,(e=>{T(e,O),$(e,i,d(e,t.data_src))})),T(e,x),$(e,"poster",d(e,t.data_poster)),$(e,i,d(e,t.data_src)),e.load()},OBJECT:(e,t)=>{T(e,N),$(e,"data",d(e,t.data_src))}},B=["IMG","IFRAME","VIDEO","OBJECT"],J=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},S=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},P=(e,t,a)=>{e.removeEventListener(t,a)},U=e=>!!e.llEvLisnrs,q=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},H=(e,t,a)=>{(e=>{delete e.llTempImage})(e),k(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),E(e,t.class_loading),t.unobserve_completed&&I(e,a)},K=(e,t,a)=>{const s=f(e)||e;U(s)||((e,t,a)=>{U(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";S(e,s,t),S(e,"error",a)})(s,(l=>{((e,t,a,s)=>{const l=m(t);H(t,a,s),v(t,a.class_loaded),u(t,"loaded"),h(a.callback_loaded,t,s),l||J(a,s)})(0,e,t,a),q(s)}),(l=>{((e,t,a,s)=>{const l=m(t);H(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||J(a,s)})(0,e,t,a),q(s)}))},Q=(e,t,a)=>{(e=>B.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{K(e,t,a),((e,t,a)=>{const s=j[e.tagName];s&&(s(e,t),V(e,t,a))})(e,t,a)})(e,t,a):((e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),K(e,t,a),(e=>{M(e)||(e[c]={backgroundImage:e.style.backgroundImage})})(e),((e,t,a)=>{const s=d(e,t.data_bg),n=d(e,t.data_bg_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=`url("${o}")`,f(e).setAttribute(i,o),V(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_multi),n=d(e,t.data_bg_multi_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=o,D(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_set);if(!s)return;const l=s.split("|");let n=l.map((e=>`image-set(${e})`));e.style.backgroundImage=n.join(),""===e.style.backgroundImage&&(n=l.map((e=>`-webkit-image-set(${e})`)),e.style.backgroundImage=n.join()),D(e,t,a)})(e,t,a)})(e,t,a)},W=e=>{e.removeAttribute(i),e.removeAttribute("srcset"),e.removeAttribute("sizes")},X=e=>{y(e,(e=>{G(e,C)})),G(e,C)},Y={IMG:X,IFRAME:e=>{G(e,O)},VIDEO:e=>{L(e,(e=>{G(e,O)})),G(e,x),e.load()},OBJECT:e=>{G(e,N)}},Z=(e,t)=>{(e=>{const t=Y[e.tagName];t?t(e):(e=>{if(!M(e))return;const t=z(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{b(e)||m(e)||(E(e,t.class_entered),E(e,t.class_exited),E(e,t.class_applied),E(e,t.class_loading),E(e,t.class_loaded),E(e,t.class_error))})(e,t),g(e),R(e)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,ae=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{const l=(e=>p.indexOf(_(e))>=0)(e);u(e,"entered"),v(e,a.class_entered),E(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&I(e,a)})(e,a,s),h(a.callback_enter,e,t,s),l||Q(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{b(e)||(v(e,a.class_exited),((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===_(e))(e)&&"IMG"===e.tagName&&(q(e),(e=>{y(e,(e=>{W(e)})),W(e)})(e),X(e),E(e,a.class_loading),k(s,-1),g(e),h(a.callback_cancel,e,t,s))})(e,t,a,s),h(a.callback_exit,e,t,s))})(e.target,e,t,a)))},se=e=>Array.prototype.slice.call(e),le=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===_(e))(e),oe=(e,t)=>(e=>se(e).filter(b))(e||le(t)),re=function(t,s){const l=o(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!te(e)&&(t._observer=new IntersectionObserver((a=>{ae(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&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;A(this,l.length),!t&&a?te(s)?((e,t,a)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),K(e,t,a),((e,t)=>{const a=j[e.tagName];a&&a(e,t)})(e,t),u(e,"native")})(e,t,a)})),A(a,0)})(l,s,this):(o=l,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(n,o)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),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};

24

dist/lazyload.iife.js

@@ -40,2 +40,3 @@ var LazyLoad = (function () {

data_bg_multi_hidpi: "bg-multi-hidpi",
data_bg_set: "bg-set",
data_poster: "poster",

@@ -414,2 +415,24 @@ class_applied: "applied",

};
var setImgsetBackground = function setImgsetBackground(element, settings, instance) {
var bgImgSetDataValue = getData(element, settings.data_bg_set);
if (!bgImgSetDataValue) {
return;
}
var imgSetValues = bgImgSetDataValue.split("|");
var bgImageValues = imgSetValues.map(function (value) {
return "image-set(".concat(value, ")");
});
element.style.backgroundImage = bgImageValues.join(); // Temporary fix for Chromeium with the -webkit- prefix
if (element.style.backgroundImage === '') {
bgImageValues = imgSetValues.map(function (value) {
return "-webkit-image-set(".concat(value, ")");
});
element.style.backgroundImage = bgImageValues.join();
}
manageApplied(element, settings, instance);
};
var setSourcesFunctions = {

@@ -534,2 +557,3 @@ IMG: setSourcesImg,

setMultiBackground(element, settings, instance);
setImgsetBackground(element, settings, instance);
};

@@ -536,0 +560,0 @@

2

dist/lazyload.iife.min.js

@@ -1,1 +0,1 @@

var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,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}();
var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=t&&"IntersectionObserver"in window,i=t&&"classList"in document.createElement("p"),o=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_bg_set:"bg-set",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,a="LazyLoad::Initialized",i=new n(t);try{e=new CustomEvent(a,{detail:{instance:i}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(e)},l="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",m="applied",p="error",h="native",E="data-",I="ll-status",k=function(n,t){return n.getAttribute(E+t)},y=function(n){return k(n,I)},A=function(n,t){return function(n,t,e){var a="data-ll-status";null!==e?n.setAttribute(a,e):n.removeAttribute(a)}(n,0,t)},w=function(n){return A(n,null)},L=function(n){return null===y(n)},O=function(n){return y(n)===h},C=[v,b,m,p],x=function(n,t,e,a){n&&(void 0===a?void 0===e?n(t):n(t,e):n(t,e,a))},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},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=[],a=0;t=n.children[a];a+=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)},j=function(n,t){D(n).forEach(t)},F=[l],B=[l,f],J=[l,s,d],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_applied),A(n,m),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),A(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,d,k(n,t.data_sizes)),W(n,s,k(n,t.data_srcset)),W(n,l,k(n,t.data_src))},Y={IMG:function(n,t){V(n,(function(n){q(n,J),X(n,t)})),q(n,J),X(n,t)},IFRAME:function(n,t){q(n,F),W(n,l,k(n,t.data_src))},VIDEO:function(n,t){j(n,(function(n){q(n,F),W(n,l,k(n,t.data_src))})),q(n,B),W(n,f,k(n,t.data_poster)),W(n,l,k(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,P),W(n,g,k(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},an=function(n){return!!n.llEvLisnrs},on=function(n){if(an(n)){var t=n.llEvLisnrs;for(var e in t){var a=t[e];en(n,e,a)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},cn=function(n,t,e){var a=z(n)||n;an(a)||function(n,t,e){an(n)||(n.llEvLisnrs={});var a="VIDEO"===n.tagName?"loadeddata":"load";tn(n,a,t),tn(n,"error",e)}(a,(function(i){!function(n,t,e,a){var i=O(t);rn(t,e,a),N(t,e.class_loaded),A(t,b),x(e.callback_loaded,t,a),i||nn(e,a)}(0,n,t,e),on(a)}),(function(i){!function(n,t,e,a){var i=O(t);rn(t,e,a),N(t,e.class_error),A(t,p),x(e.callback_error,t,a),e.restore_on_error&&H(t,J),i||nn(e,a)}(0,n,t,e),on(a)}))},un=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var a=k(n,t.data_bg),i=k(n,t.data_bg_hidpi),r=o&&i?i:a;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),Q(n,t,e))}(n,t,e),function(n,t,e){var a=k(n,t.data_bg_multi),i=k(n,t.data_bg_multi_hidpi),r=o&&i?i:a;r&&(n.style.backgroundImage=r,K(n,t,e))}(n,t,e),function(n,t,e){var a=k(n,t.data_bg_set);if(a){var i=a.split("|"),o=i.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=o.join(),""===n.style.backgroundImage&&(o=i.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=o.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var a=Y[n.tagName];a&&(a(n,t),Q(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,J)})),H(n,J)},dn={IMG:sn,IFRAME:function(n){H(n,F)},VIDEO:function(n){j(n,(function(n){H(n,F)})),H(n,B),n.load()},OBJECT:function(n){H(n,P)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(S(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),w(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,a){var i=function(n){return C.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,a),x(e.callback_enter,n,t,a),i||un(n,e,a)}(n.target,n,t,e):function(n,t,e,a){L(n)||(N(n,e.class_exited),function(n,t,e,a){e.cancel_on_exit&&function(n){return y(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(a,-1),w(n),x(e.callback_cancel,n,t,a))}(n,t,e,a),x(e.callback_exit,n,t,a))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},mn=function(n){return n.container.querySelectorAll(n.elements_selector)},pn=function(n){return function(n){return y(n)===p}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||mn(t))},En=function(n,e){var i=c(n);this._settings=i,this.loadingCount=0,function(n,t){a&&!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=mn(n),bn(e).filter(pn)).forEach((function(t){M(t,n.class_error),w(t)})),t.update()}(n,e)}))}(i,this),this.update(e)};return En.prototype={update:function(n){var t,i,o=this._settings,r=hn(n,o);G(this,r.length),!e&&a?gn(o)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),G(e,0)}(r,o,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(),mn(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;hn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;mn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){w(n)},t&&function(n,t){if(t)if(t.length)for(var e,a=0;e=t[a];a+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En}();

24

dist/lazyload.js

@@ -43,2 +43,3 @@ (function (global, factory) {

data_bg_multi_hidpi: "bg-multi-hidpi",
data_bg_set: "bg-set",
data_poster: "poster",

@@ -417,2 +418,24 @@ class_applied: "applied",

};
var setImgsetBackground = function setImgsetBackground(element, settings, instance) {
var bgImgSetDataValue = getData(element, settings.data_bg_set);
if (!bgImgSetDataValue) {
return;
}
var imgSetValues = bgImgSetDataValue.split("|");
var bgImageValues = imgSetValues.map(function (value) {
return "image-set(".concat(value, ")");
});
element.style.backgroundImage = bgImageValues.join(); // Temporary fix for Chromeium with the -webkit- prefix
if (element.style.backgroundImage === '') {
bgImageValues = imgSetValues.map(function (value) {
return "-webkit-image-set(".concat(value, ")");
});
element.style.backgroundImage = bgImageValues.join();
}
manageApplied(element, settings, instance);
};
var setSourcesFunctions = {

@@ -537,2 +560,3 @@ IMG: setSourcesImg,

setMultiBackground(element, settings, instance);
setImgsetBackground(element, settings, instance);
};

@@ -539,0 +563,0 @@

2

dist/lazyload.min.js

@@ -1,1 +0,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;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),o=t&&"IntersectionObserver"in window,i=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,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}));
!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;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),o=t&&"IntersectionObserver"in window,i=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_bg_set:"bg-set",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},c=function(t){return n({},r,t)},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",m="error",h="native",E="data-",I="ll-status",y=function(n,t){return n.getAttribute(E+t)},k=function(n){return y(n,I)},A=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)},w=function(n){return A(n,null)},L=function(n){return null===k(n)},O=function(n){return k(n)===h},x=[v,b,p,m],C=function(n,t,e,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)},j=function(n){for(var t,e=[],o=0;t=n.children[o];o+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&j(e).forEach(t)},V=function(n,t){j(n).forEach(t)},F=[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_applied),A(n,p),e&&(t.unobserve_completed&&T(n,t),C(t.callback_applied,n,e))},Q=function(n,t,e){N(n,t.class_loading),A(n,v),e&&(R(e,1),C(t.callback_loading,n,e))},W=function(n,t,e){e&&n.setAttribute(t,e)},X=function(n,t){W(n,f,y(n,t.data_sizes)),W(n,s,y(n,t.data_srcset)),W(n,l,y(n,t.data_src))},Y={IMG:function(n,t){D(n,(function(n){q(n,J),X(n,t)})),q(n,J),X(n,t)},IFRAME:function(n,t){q(n,F),W(n,l,y(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),W(n,l,y(n,t.data_src))})),q(n,B),W(n,d,y(n,t.data_poster)),W(n,l,y(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,P),W(n,g,y(n,t.data_src))}},Z=["IMG","IFRAME","VIDEO","OBJECT"],nn=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||C(n.callback_finish,t)},tn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},en=function(n,t,e){n.removeEventListener(t,e)},on=function(n){return!!n.llEvLisnrs},an=function(n){if(on(n)){var t=n.llEvLisnrs;for(var e in t){var o=t[e];en(n,e,o)}delete n.llEvLisnrs}},rn=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&T(n,e)},cn=function(n,t,e){var o=z(n)||n;on(o)||function(n,t,e){on(n)||(n.llEvLisnrs={});var o="VIDEO"===n.tagName?"loadeddata":"load";tn(n,o,t),tn(n,"error",e)}(o,(function(i){!function(n,t,e,o){var i=O(t);rn(t,e,o),N(t,e.class_loaded),A(t,b),C(e.callback_loaded,t,o),i||nn(e,o)}(0,n,t,e),an(o)}),(function(i){!function(n,t,e,o){var i=O(t);rn(t,e,o),N(t,e.class_error),A(t,m),C(e.callback_error,t,o),e.restore_on_error&&H(t,J),i||nn(e,o)}(0,n,t,e),an(o)}))},un=function(n,t,e){!function(n){return Z.indexOf(n.tagName)>-1}(n)?function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),cn(n,t,e),function(n){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),Q(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,K(n,t,e))}(n,t,e),function(n,t,e){var o=y(n,t.data_bg_set);if(o){var i=o.split("|"),a=i.map((function(n){return"image-set(".concat(n,")")}));n.style.backgroundImage=a.join(),""===n.style.backgroundImage&&(a=i.map((function(n){return"-webkit-image-set(".concat(n,")")})),n.style.backgroundImage=a.join()),K(n,t,e)}}(n,t,e)}(n,t,e):function(n,t,e){cn(n,t,e),function(n,t,e){var o=Y[n.tagName];o&&(o(n,t),Q(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},sn=function(n){D(n,(function(n){H(n,J)})),H(n,J)},fn={IMG:sn,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),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){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),w(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(k(n))>=0}(n);A(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){L(n)||(N(n,e.class_exited),function(n,t,e,o){e.cancel_on_exit&&function(n){return k(n)===v}(n)&&"IMG"===n.tagName&&(an(n),function(n){D(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),R(o,-1),w(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)},mn=function(n){return function(n){return k(n)===m}(n)},hn=function(n,t){return function(n){return bn(n).filter(L)}(n||pn(t))},En=function(n,e){var 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(mn)).forEach((function(t){M(t,n.class_error),w(t)})),t.update()}(n,e)}))}(i,this),this.update(e)};return En.prototype={update:function(n){var t,i,a=this._settings,r=hn(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"),cn(n,t,e),function(n,t){var e=Y[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(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;hn(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){w(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}));

2

package.json
{
"name": "vanilla-lazyload",
"version": "17.7.0",
"version": "17.8.1",
"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.",

@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

60

README.md

@@ -19,3 +19,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, animated SVGs, 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 [all features](#-all-features-compared) for more.

#### Lazy image:
### Lazy image:

@@ -26,3 +26,3 @@ ```html

#### Lazy image with low quality placeholder:
### Lazy image with low quality placeholder:

@@ -33,3 +33,3 @@ ```html

#### Lazy responsive image with `srcset` and `sizes`:
### Lazy responsive image with `srcset` and `sizes`:

@@ -49,3 +49,3 @@ ```html

#### Lazy responsive image with hi-dpi support using the `picture` tag:
### Lazy responsive image with hi-dpi support using the `picture` tag:

@@ -62,3 +62,3 @@ ```html

#### Lazy responsive image with automatic _WebP_ format selection, using the `picture` tag:
### Lazy responsive image with automatic _WebP_ format selection, using the `picture` tag:

@@ -86,7 +86,7 @@ ```html

#### Lazy background image
### Lazy background image
⚠ **IMPORTANT NOTE**: To display content images on your pages, always use the `img` tag. This would benefit the SEO and the accessibility of your website. To understand if your images are content or background, ask yourself: "would my website user like to see those images when printing out the page?". If the answer is "yes", then your images are content images and you should avoid using background images to display them.
Single background image:
#### Single background image:

@@ -97,3 +97,3 @@ ```html

Single background, with HiDPI screen support:
#### Single background, with HiDPI screen support:

@@ -104,3 +104,3 @@ ```html

Multiple backgrounds:
#### Multiple backgrounds:

@@ -118,6 +118,4 @@ ```html

ℹ Please note that you must use `url()` to wrap the URLs in your `data-bg-multi` attributes.
#### Multiple backgrounds, HiDPI screen support:
Multiple backgrounds, HiDPI screen support:
```html

@@ -137,11 +135,29 @@ <div

ℹ Please note that you must use `url()` to wrap the URLs in your `data-bg-multi-hidpi` attributes.
#### Backgrounds with `image-set`:
#### Lazy animated SVG
```html
<div class="lazy" data-bg-set="url('lazy@1x.jpg') 1x, url('lazy@2x.jpg') 2x">...</div>
```
#### Multiple backgrounds with `image-set`:
```html
<div
class="lazy"
data-bg-set="
url('lazy-head@1x.jpg') 1x, url('lazy-head@2x.jpg') 2x |
url('lazy-body@1x.jpg') 1x, url('lazy-body@2x.jpg') 2x
"
>
...
</div>
```
### Lazy animated SVG
```html
<object class="lazy" type="image/svg+xml" data-src="lazy.svg"></object>
```
#### Lazy video
### Lazy video

@@ -158,3 +174,3 @@ ```html

#### Lazy iframe
### Lazy iframe

@@ -173,3 +189,3 @@ ```html

The latest, recommended version of LazyLoad is **17.7.0**.
The latest, recommended version of LazyLoad is **17.8.1**.

@@ -183,3 +199,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.7.0/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.1/dist/lazyload.min.js"></script>
```

@@ -225,3 +241,3 @@

async
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.7.0/dist/lazyload.min.js"
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.1/dist/lazyload.min.js"
></script>

@@ -260,3 +276,3 @@ ```

async
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.7.0/dist/lazyload.min.js"
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.1/dist/lazyload.min.js"
></script>

@@ -610,5 +626,6 @@ ```

| Content | Lazy loading background images | [Code](demos/background_images.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images.html) |
| Content | Lazy loading multiple background images | [Code](demos/background_images_multi.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images_multi.html) |
| Content | Lazy loading background images with `image-set()` | [Code](demos/background_images_image-set.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images_image-set.html) |
| Content | Lazy loading iframes | [Code](demos/iframes.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/iframes.html) |
| Content | Lazy loading animated SVGs and PDF files | [Code](demos/objects.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/objects.html) |
| Content | Lazy loading multiple background images | [Code](demos/background_images_multi.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images_multi.html) |
| Content | Lazy WebP images with the `<picture>` tag and the `type` attribute for WebP | [Code](demos/picture_type_webp.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/picture_type_webp.html) |

@@ -711,2 +728,3 @@ | Loading | Asynchronous loading LazyLoad with requireJS | [Code](demos/amd.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/amd.html) |

| `data_bg_multi_hidpi` | The name of the data attribute containing the value of multiple `background-image` to load lazily on HiDPI screens, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg-multi-hidpi"`, just pass `"bg-multi-hidpi"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg-multi-hidpi"` | `"lazy-bg-multi-hidpi"` |
| `data_bg_set` | The name of the data attribute containing the value of the background to be applied with image-set, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg-set"`, just pass `"bg-set"`. The attribute value must be what goes inside the `image-set` CSS function. You can separate values with a pipe (`\|`) character to have multiple backgrounds. | `"bg-set"` | `"lazy-bg-set"` |
| `data_poster` | The name of the data attribute containing the value of `poster` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`. | `"poster"` | `"lazy-poster"` |

@@ -713,0 +731,0 @@ | `class_applied` | The class applied to the multiple background elements after the multiple background was applied | `"applied"` | `"lazy-applied"` |

613

typings/lazyload.d.ts
export interface ILazyLoadOptions {
/**
/**
* The CSS selector of the elements to load lazily, which will be selected

@@ -8,341 +8,358 @@ * as descendants of the `container` object.

*/
elements_selector?: string;
elements_selector?: string;
/**
* The scrolling container of the elements in the `elements_selector` option.
*
* @default document
*/
container?: HTMLElement;
/**
* The scrolling container of the elements in the `elements_selector` option.
*
* @default document
*/
container?: HTMLElement;
/**
* A number of pixels representing the outer distance off the scrolling area
* from which to start loading the elements.
* @default 300
*/
threshold?: number;
/**
* A number of pixels representing the outer distance off the scrolling area
* from which to start loading the elements.
* @default 300
*/
threshold?: number;
/**
* Similar to `threshold`, but accepting multiple values and both `px` and `%`
* units. It maps directly to the `rootMargin` property of IntersectionObserver,
* so it must be a string with a syntax similar to the CSS `margin` property.
* You can use it when you need to have different thresholds for the scrolling
* area. It overrides `threshold` when passed.
*
* @default null
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
*/
thresholds?: string;
/**
* Similar to `threshold`, but accepting multiple values and both `px` and `%`
* units. It maps directly to the `rootMargin` property of IntersectionObserver,
* so it must be a string with a syntax similar to the CSS `margin` property.
* You can use it when you need to have different thresholds for the scrolling
* area. It overrides `threshold` when passed.
*
* @default null
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
*/
thresholds?: string;
/**
* The name of the data attribute containing the element URL to load,
* excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-src"`,
* just pass `"src"`
*
* @default "src"
*/
data_src?: string;
/**
* The name of the data attribute containing the element URL to load,
* excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-src"`,
* just pass `"src"`
*
* @default "src"
*/
data_src?: string;
/**
* The name of the data attribute containing the image URL set to load,
* in either img and source tags, excluding the "data-" part.
* E.g. if your data attribute is named `"data-srcset"`,
* just pass `"srcset"`
*
* @default "srcset"
*/
data_srcset?: string;
/**
* The name of the data attribute containing the image URL set to load,
* in either img and source tags, excluding the "data-" part.
* E.g. if your data attribute is named `"data-srcset"`,
* just pass `"srcset"`
*
* @default "srcset"
*/
data_srcset?: string;
/**
* The name of the data attribute containing the sizes attribute to use,
* excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"`
*
* @default "sizes"
*/
data_sizes?: string;
/**
* The name of the data attribute containing the sizes attribute to use,
* excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"`
*
* @default "sizes"
*/
data_sizes?: string;
/**
* The name of the data attribute containing the URL of `background-image`
* to load lazily, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg"`, just pass `"bg"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg"
*/
data_bg?: string;
/**
* The name of the data attribute containing the URL of `background-image`
* to load lazily, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg"`, just pass `"bg"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg"
*/
data_bg?: string;
/**
* The name of the data attribute containing the URL of `background-image`
* to load lazily on HiDPI screens, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg-hidpi"`, just pass `"bg-hidpi"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg-hidpi"
*/
data_bg_hidpi?: string;
/**
* The name of the data attribute containing the URL of `background-image`
* to load lazily on HiDPI screens, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg-hidpi"`, just pass `"bg-hidpi"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg-hidpi"
*/
data_bg_hidpi?: string;
/**
* The name of the data attribute containing the value of multiple `background-image`
* to load lazily, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg-multi"`, just pass `"bg-multi"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg-multi"
*/
data_bg_multi?: string;
/**
* The name of the data attribute containing the value of multiple `background-image`
* to load lazily, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg-multi"`, just pass `"bg-multi"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg-multi"
*/
data_bg_multi?: string;
/**
* The name of the data attribute containing the value of multiple `background-image`
* to load lazily on HiDPI screens, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg-multi-hidpi"`, just pass `"bg-multi-hidpi"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg-multi-hidpi"
*/
data_bg_multi_hidpi?: string;
/**
* The name of the data attribute containing the value of multiple `background-image`
* to load lazily on HiDPI screens, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg-multi-hidpi"`, just pass `"bg-multi-hidpi"`.
* The attribute value must be a valid value for `background-image`,
* including the `url()` part of the CSS instruction.
*
* @default "bg-multi-hidpi"
*/
data_bg_multi_hidpi?: string;
/**
* The name of the data attribute containing the value of poster to load lazily,
* excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`.
*
* @default "poster"
*/
data_poster?: string;
/**
* The name of the data attribute containing the value of the background to
* be applied with image-set, excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-bg-set"`, just pass `"bg-set"`.
* The attribute value must be what goes inside the `image-set` CSS function.
* You can separate values with a pipe (`|`) character to have
* multiple backgrounds.
*
* @default "bg-set"
*/
data_bg_set?: string;
/**
* The class applied to the multiple background elements after the multiple
* background was applied
*
* @default "applied"
*/
class_applied?: string;
/**
* The name of the data attribute containing the value of poster to load lazily,
* excluding the `"data-"` part.
* E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`.
*
* @default "poster"
*/
data_poster?: string;
/**
* The class applied to the elements while the loading is in progress.
*
* @default "loading"
*/
class_loading?: string;
/**
* The class applied to the multiple background elements after the multiple
* background was applied
*
* @default "applied"
*/
class_applied?: string;
/**
* The class applied to the elements when the loading is complete.
*
* @default "loaded"
*/
class_loaded?: string;
/**
* The class applied to the elements while the loading is in progress.
*
* @default "loading"
*/
class_loading?: string;
/**
* The class applied to the elements when the element causes an error.
*
* @default "error"
*/
class_error?: string;
/**
* The class applied to the elements when the loading is complete.
*
* @default "loaded"
*/
class_loaded?: string;
/**
* The class applied to the elements after they entered the viewport.
*
* @default "entered"
*/
class_entered?: string;
/**
* The class applied to the elements when the element causes an error.
*
* @default "error"
*/
class_error?: string;
/**
* The class applied to the elements after they exited the viewport.
*
* @default "exited"
*/
class_exited?: string;
/**
* The class applied to the elements after they entered the viewport.
*
* @default "entered"
*/
class_entered?: string;
/**
* A boolean that defines whether or not to automatically unobserve
* elements once they've loaded or throwed an error
*
* @default true
*/
unobserve_completed?: boolean;
/**
* The class applied to the elements after they exited the viewport.
*
* @default "exited"
*/
class_exited?: string;
/**
* A boolean that defines whether or not to automatically unobserve
* elements once they entered the viewport
*
* @default false
*/
unobserve_entered?: boolean;
/**
* A boolean that defines whether or not to automatically unobserve
* elements once they've loaded or throwed an error
*
* @default true
*/
unobserve_completed?: boolean;
/**
* A boolean that defines whether or not to cancel the download of the
* images that exit the viewport while they are still loading, eventually
* restoring the original attributes. It applies only to images so to the
* `img` (and `picture`) tags, so it doesn't apply to background images,
* `iframe`s nor `video`s.
*
* @default true
*/
cancel_on_exit?: boolean;
/**
* A boolean that defines whether or not to automatically unobserve
* elements once they entered the viewport
*
* @default false
*/
unobserve_entered?: boolean;
/**
* A callback function which is called whenever an element enters the viewport.
* Arguments: DOM element, intersection observer entry, lazyload instance.
*/
callback_enter?: (
elt: HTMLElement,
entry: IntersectionObserverEntry,
instance: ILazyLoadInstance
) => void;
/**
* A boolean that defines whether or not to cancel the download of the
* images that exit the viewport while they are still loading, eventually
* restoring the original attributes. It applies only to images so to the
* `img` (and `picture`) tags, so it doesn't apply to background images,
* `iframe`s nor `video`s.
*
* @default true
*/
cancel_on_exit?: boolean;
/**
* A callback function which is called whenever an element exits the viewport.
* Arguments: `DOM element`, `intersection observer entry`, `lazyload instance`.
*/
callback_exit?: (
elt: HTMLElement,
entry: IntersectionObserverEntry,
instance: ILazyLoadInstance
) => void;
/**
* A callback function which is called whenever an element enters the viewport.
* Arguments: DOM element, intersection observer entry, lazyload instance.
*/
callback_enter?: (
elt: HTMLElement,
entry: IntersectionObserverEntry,
instance: ILazyLoadInstance
) => void;
/**
* A callback function which is called whenever a multiple background
* element starts loading.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_applied?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever an element exits the viewport.
* Arguments: `DOM element`, `intersection observer entry`, `lazyload instance`.
*/
callback_exit?: (
elt: HTMLElement,
entry: IntersectionObserverEntry,
instance: ILazyLoadInstance
) => void;
/**
* A callback function which is called whenever an element starts loading.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_loading?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever a multiple background
* element starts loading.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_applied?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever an element finishes loading.
* Note that, in version older than 11.0.0, this option went under the
* name `callback_load`.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_loaded?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever an element starts loading.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_loading?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever an element triggers an error.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_error?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever an element finishes loading.
* Note that, in version older than 11.0.0, this option went under the
* name `callback_load`.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_loaded?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called when there are no more elements to load and all elements have been downloaded.
* Arguments: `lazyload instance`.
*/
callback_finish?: (instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever an element triggers an error.
* Arguments: `DOM element`, `lazyload instance`.
*/
callback_error?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;
/**
* A callback function which is called whenever an element loading is
* canceled while loading, as for `cancel_on_exit: true`
*/
callback_cancel?: (
elt: HTMLElement,
entry: IntersectionObserverEntry,
instance: ILazyLoadInstance
) => void;
/**
* A callback function which is called when there are no more elements to load and all elements have been downloaded.
* Arguments: `lazyload instance`.
*/
callback_finish?: (instance: ILazyLoadInstance) => void;
/**
* This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/)
* to do [hybrid lazy loading](https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/).
* On browsers that support it, LazyLoad will set the `loading="lazy"` attribute on `images` and `iframes`,
* and delegate their loading to the browser.
*
* @default false
*/
use_native?: boolean;
/**
* A callback function which is called whenever an element loading is
* canceled while loading, as for `cancel_on_exit: true`
*/
callback_cancel?: (
elt: HTMLElement,
entry: IntersectionObserverEntry,
instance: ILazyLoadInstance
) => void;
/**
* This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/)
* to do [hybrid lazy loading](https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/).
* On browsers that support it, LazyLoad will set the `loading="lazy"` attribute on `images` and `iframes`,
* and delegate their loading to the browser.
*
* @default false
*/
use_native?: boolean;
/**
* Tells LazyLoad if to restore the original values of `src`, `srcset` and `sizes`
* when a loading error occurs.
*
* @default false
*/
restore_on_error?: boolean;
}
export interface ILazyLoadInstance {
/**
* Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`.
*
* ### Use case
*
* Update LazyLoad after you added or removed DOM elements to the page.
*/
update: (elements?: NodeListOf<HTMLElement>) => void;
/**
* Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`.
*
* ### Use case
*
* Update LazyLoad after you added or removed DOM elements to the page.
*/
update: (elements?: NodeListOf<HTMLElement>) => void;
/**
* Destroys the instance, unsetting instance variables and removing listeners.
*
* ### Use case
*
* Free up some memory. Especially useful for Single Page Applications.
*/
destroy: () => void;
/**
* Destroys the instance, unsetting instance variables and removing listeners.
*
* ### Use case
*
* Free up some memory. Especially useful for Single Page Applications.
*/
destroy: () => void;
/**
* Loads all the lazy elements right away and stop observing them,
* no matter if they are inside or outside the viewport,
* no matter if they are hidden or visible.
*
* ### Use case
*
* To load all the remaining elements in advance
*/
loadAll: () => void;
/**
* Loads all the lazy elements right away and stop observing them,
* no matter if they are inside or outside the viewport,
* no matter if they are hidden or visible.
*
* ### Use case
*
* To load all the remaining elements in advance
*/
loadAll: () => void;
/**
* Restores DOM to its original state. Note that it doesn't destroy LazyLoad,
* so you probably want to use it along with destroy().
*
* ### Use case
*
* Reset the DOM before a soft page navigation (SPA) occures, e.g. using TurboLinks.
*/
restoreAll: () => void;
/**
* Restores DOM to its original state. Note that it doesn't destroy LazyLoad,
* so you probably want to use it along with destroy().
*
* ### Use case
*
* Reset the DOM before a soft page navigation (SPA) occures, e.g. using TurboLinks.
*/
restoreAll: () => void;
/**
* The number of elements that are currently downloading from the network
* (limitedly to the ones managed by the instance of LazyLoad).
* This is particularly useful to understand whether
* or not is safe to destroy this instance of LazyLoad.
*/
loadingCount: number;
/**
* The number of elements that are currently downloading from the network
* (limitedly to the ones managed by the instance of LazyLoad).
* This is particularly useful to understand whether
* or not is safe to destroy this instance of LazyLoad.
*/
loadingCount: number;
/**
* The number of elements that haven't been lazyloaded yet
* (limitedly to the ones managed by the instance of LazyLoad)
*/
toLoadCount: number;
/**
* The number of elements that haven't been lazyloaded yet
* (limitedly to the ones managed by the instance of LazyLoad)
*/
toLoadCount: number;
}
export interface ILazyLoad {
new (
options?: ILazyLoadOptions,
elements?: NodeListOf<HTMLElement>
): ILazyLoadInstance;
new (options?: ILazyLoadOptions, elements?: NodeListOf<HTMLElement>): ILazyLoadInstance;
/**
* Immediately loads the lazy `element`.
* You can pass your custom options in the settings parameter.
* Note that the `elements_selector` option has no effect,
* since you are passing the element as a parameter.
* Also note that this method has effect only once on a specific `element`.
*
* ### Use case
*
* To load an `element` at mouseover or at any other event different than "entering the viewport"
*/
load(element: HTMLElement, settings: ILazyLoadOptions): void;
/**
* Immediately loads the lazy `element`.
* You can pass your custom options in the settings parameter.
* Note that the `elements_selector` option has no effect,
* since you are passing the element as a parameter.
* Also note that this method has effect only once on a specific `element`.
*
* ### Use case
*
* To load an `element` at mouseover or at any other event different than "entering the viewport"
*/
load(element: HTMLElement, settings: ILazyLoadOptions): void;
/**
* Resets the internal status of the given element.
*
* ### Use case
*
* To tell LazyLoad to consider this `element` again, for example if you changed
* the `data-src` attribute after the previous `data-src` was loaded,
* call this method, then call `update()`.
*/
resetStatus(element: HTMLElement): void;
/**
* Resets the internal status of the given element.
*
* ### Use case
*
* To tell LazyLoad to consider this `element` again, for example if you changed
* the `data-src` attribute after the previous `data-src` was loaded,
* call this method, then call `update()`.
*/
resetStatus(element: HTMLElement): void;
}

@@ -349,0 +366,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc