-
Notifications
You must be signed in to change notification settings - Fork 1
/
lazyloading.min.js
1 lines (1 loc) · 4.43 KB
/
lazyloading.min.js
1
function VtexLazyload(e){let t;this.root=null!=e.root?document.querySelector(e.root):null,this.getElementsInRoot=()=>null!=this.root?`${e.root} ${e.targets}:not(.--lazy-loaded)`:e.targets+":not(.--lazy-loaded)",this.lazyElements=document.querySelectorAll(this.getElementsInRoot()),this.onRender=e.onRender,this.placeholder=e.placeholder;const s=()=>"IntersectionObserver"in window,a=(e,t)=>e.tagName.toLowerCase()==t,n=e=>e.src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";const o=()=>{t&&clearTimeout(t),t=setTimeout((()=>{let t=null==this.root?window.pageYOffset:0;this.lazyElements.forEach((s=>{let n=!1,o=null==this.root?s.offsetTop<window.innerHeight+t:function(e,t){const{bottom:s,height:a,top:n}=e.getBoundingClientRect(),o=t.getBoundingClientRect();return n<=o.top?o.top-n<=a:s-o.bottom<=a}(s,document.querySelector(e.root));if(!n&&o)if(a(s,"img")||a(s,"iframe"))n=!0,s.classList.contains("--lazy-loaded")||(s.src=s.dataset.lazy,s.srcset&&(s.srcset=s.dataset.lazySet),s.classList.remove("--lazy-waiting"),s.classList.add("--lazy-loaded"),this.onRender&&this.onRender(s),s.addEventListener("error",(()=>s.classList.add("--lazy-error"))));else if(n=!0,!s.classList.contains("--lazy-loaded")){const e=s.textContent||s.innerHTML;s.insertAdjacentHTML("afterbegin",e),s.classList.remove("--lazy-waiting"),s.classList.add("--lazy-loaded"),s.querySelector("noscript")&&s.querySelector("noscript").remove(),this.onRender&&this.onRender(s)}})),0==this.lazyElements.length&&(document.removeEventListener("scroll",o),window.removeEventListener("resize",o),window.removeEventListener("orientationChange",o))}),20)};s()?this.lazyInstance=new IntersectionObserver(((e,t)=>{e.forEach((e=>{if(e.isIntersecting){const t=e.target;if(a(t,"img")||a(t,"iframe"))t.src=t.dataset.lazy,t.srcset&&(t.srcset=t.dataset.lazySet),t.classList.remove("--lazy-waiting"),t.classList.add("--lazy-loaded"),this.onRender&&this.onRender(t),this.lazyInstance.unobserve(t),t.addEventListener("error",(()=>t.classList.add("--lazy-error")));else{const e=t.textContent||t.innerHTML;t.insertAdjacentHTML("afterbegin",e),t.classList.remove("--lazy-waiting"),t.classList.add("--lazy-loaded"),t.querySelector("noscript")&&t.querySelector("noscript").remove(),this.onRender&&this.onRender(t),this.lazyInstance.unobserve(t)}}}))}),{rootMargin:e.margin||"300px 20px",root:this.root}):this.lazyInstance="",this.fallbackRunnerListeners=t=>{let s=document;null!=e.root&&(s=document.querySelector(e.root)),t?(o(),s.addEventListener("scroll",o,{passive:!0}),document.addEventListener("DOMContentLoaded",o),window.addEventListener("resize",o),window.addEventListener("orientationchange",o)):(s.removeEventListener("scroll",o),document.removeEventListener("DOMContentLoaded",o),window.removeEventListener("resize",o),window.removeEventListener("orientationchange",o))},this.fallbackLazyload=()=>{this.lazyElements.forEach((e=>{e.classList.contains("--lazy-triggered")?e.classList.add("--lazy-triggered"):e.classList.add("--lazy-triggered","--lazy-waiting"),a(e,"img")&&this.placeholder&&n(e)})),this.fallbackRunnerListeners(!0)},this.fallbackDestroyInElement=e=>{let t=document.querySelector(e+":not(.--lazy-loaded)");t&&t.getAttribute("data-lazy")&&(t.setAttribute("data-stoped-lazy",t.dataset.lazy),t.removeAttribute("data-lazy"),t.classList.remove("--lazy-triggered"),t.classList.remove("--lazy-waiting"),this.lazyElements=Array.from(this.lazyElements).filter((e=>e!=t)))},this.runnerLazyload=()=>{s()?this.lazyElements.forEach((e=>{a(e,"img")&&(this.placeholder&&n(e)),e.classList.contains("--lazy-triggered")?e.classList.add("--lazy-triggered"):e.classList.add("--lazy-triggered","--lazy-waiting"),this.lazyInstance.observe(e)})):this.fallbackLazyload()},this.destroy=()=>s()?this.lazyInstance.disconnect():this.fallbackRunnerListeners(!1),this.destroyInElement=e=>{s()?this.lazyInstance.unobserve(document.querySelector(e)):this.fallbackDestroyInElement(e)},this.update=()=>{this.lazyElements=document.querySelectorAll(this.getElementsInRoot()),s()?this.runnerLazyload():this.fallbackLazyload(!0)},this.reinit=()=>{let t=document.querySelectorAll(null!=this.root?e.root+" [data-stoped-lazy]":"[data-stoped-lazy]");t.length>0&&t.forEach((e=>{e.setAttribute("data-lazy",e.dataset.stopedLazy),e.removeAttribute("data-stopedLazy")})),this.lazyElements=document.querySelectorAll(this.getElementsInRoot()),s()?this.runnerLazyload():this.fallbackLazyload(!0)},this.runnerLazyload(),console.log("%cstart vtex-Lazyloading","color:#16c111;font-size: 16px;font-wheight: 700")}