class ResponsiveImage extends HTMLElement{get intersecting(){return this.hasAttribute("intersecting")}constructor(){super(),this.img=this.querySelector("img"),this.observerCallback=this.observerCallback.bind(this),this.loadImage=this.loadImage.bind(this),this.img.onload=this.onLoad.bind(this)}connectedCallback(){"IntersectionObserver"in window?this.initIntersectionObserver():this.loadImage()}disconnectedCallback(){this.disconnectObserver()}loadImage(){this.setAttribute("intersecting","true"),this.img.width=this.clientWidth,this.img.height=this.clientHeight,this.img.sizes=this.clientWidth+"px"}onLoad(){this.removeAttribute("data-image-loading"),this.img.classList.add("f-img-loaded")}observerCallback(entries,observer){entries[0].isIntersecting&&(observer.unobserve(this),this.loadImage())}initIntersectionObserver(){if(this.observer)return;const rootMargin="10px";this.observer=new IntersectionObserver(this.observerCallback,{rootMargin}),this.observer.observe(this)}disconnectObserver(){this.observer&&(this.observer.disconnect(),this.observer=null,delete this.observer)}}customElements.define("responsive-image",ResponsiveImage);
//# sourceMappingURL=/cdn/shop/t/3/assets/lazy-image.js.map?v=34024711196911832471672340465