@mottor/vanilla-lazyload/dist/lazyload.esm.min.js

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 leve

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