@likun./lazy-img/dist/index.js

a custom element of image-lazy-loading based on web-components

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.LazyImgEntry=e():t.LazyImgEntry=e()}(globalThis,(()=>(()=>{"use strict";var t={557:(t,e,i)=>{Object.defineProperty(e,"__esModule",{value:!0});const r=i(928);class s extends HTMLElement{constructor(){super(),this.done=!1,this.createIntersectionObserver=()=>{if(!this.isSupportIntersectionObserver)throw new Error("the current environment does not support IntersectionObserver API.");this.observer&&this.observer.disconnect(),this.observer=new IntersectionObserver((([t])=>{!this.done&&t&&t.isIntersecting&&(this.img.setAttribute("src",this.getAttribute("src")),this.done=!0,this.observer&&this.observer.disconnect())}),{root:null,rootMargin:"0px",threshold:0}),this.observer.observe(this)},this.handleEmit=t=>{this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:{target:this,src:this.getAttribute("src")}}))},this.handleLoad=()=>{this.handleEmit("lazyload")},this.handleError=()=>{this.handleEmit("lazyerror")},this.shadow=this.attachShadow({mode:"open"}),this.shadow.innerHTML="\n      <style>\n        :host{\n          display: inline-flex;\n          background: #F5F7FA;\n        }\n        img{\n          width: 100%;\n          height: 100%;\n        }\n      </style>\n    ",this.img=document.createElement("img"),this.img.setAttribute("alt"," "),this.shadow.appendChild(this.img)}attributeChangedCallback(t,e,i){e!==i&&(["width","height"].includes(t)?this.style.setProperty(t,(0,r.getValWithUnit)(i)):"src"===t?this.done&&this.img.setAttribute(t,i):"presrc"===t?!this.done&&this.img.setAttribute(t,i):this.img.setAttribute(t,i))}connectedCallback(){this.init()}disconnectedCallback(){this.img.onload=null,this.img.onerror=null}init(){this.hasAttribute("width")||this.hasAttribute("height")||(this.style.setProperty("width","300px"),this.style.setProperty("height","200px")),this.img.onload=this.handleLoad,this.img.onerror=this.handleError,this.createIntersectionObserver(),Promise.resolve().then((()=>{!this.done&&this.hasAttribute("presrc")&&this.img.setAttribute("src",this.getAttribute("presrc"))}))}get isInViewport(){const t=window.innerWidth||document.documentElement.clientWidth,e=window.innerHeight||document.documentElement.clientHeight,{top:i,bottom:r,left:s,right:n}=this.getBoundingClientRect();return!(i>e||r<0||s>t||n<0)}get isSupportIntersectionObserver(){return[IntersectionObserver,IntersectionObserverEntry].map((t=>typeof t)).every((t=>"function"===t))}}s.observedAttributes=["src","alt","presrc","width","height"],e.default=s},607:function(t,e,i){var r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.LazyImg=void 0;const s=r(i(557));e.LazyImg=s.default,customElements.define("lazy-img",s.default)},928:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.throttle=e.getValWithUnit=void 0,e.getValWithUnit=function(t){if(!t)return"0";const e=t.toString();return["px","%","rem","em","vh","vw"].some((t=>e.endsWith(t)))?e:`${e}px`},e.throttle=function(t,e=300,i=!0){const r=this;let s=null,n=!1;return(...o)=>{!n&&i?(t.apply(r,o),n=!0):s||(s=setTimeout((()=>{t.apply(r,o),s=null}),e))}}}},e={};return function i(r){var s=e[r];if(void 0!==s)return s.exports;var n=e[r]={exports:{}};return t[r].call(n.exports,n,n.exports,i),n.exports}(607)})()));