vue3-lazyload-174ebfe8.js 4.5 KB

1
  1. var a=(r=>(r.LOADING="loading",r.LOADED="loaded",r.ERROR="error",r))(a||{});const g=typeof window<"u"&&window!==null,l=m(),O=Object.prototype.propertyIsEnumerable,A=Object.getOwnPropertySymbols;function b(r){return typeof r=="function"||toString.call(r)==="[object Object]"}function _(r){return typeof r=="object"?r===null:typeof r!="function"}function I(r){return r!=="__proto__"&&r!=="constructor"&&r!=="prototype"}function m(){return g&&"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype?("isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get(){return this.intersectionRatio>0}}),!0):!1}function v(r,...t){if(!b(r))throw new TypeError("expected the first argument to be an object");if(t.length===0||typeof Symbol!="function"||typeof A!="function")return r;for(const e of t){const o=A(e);for(const i of o)O.call(e,i)&&(r[i]=e[i])}return r}function h(r,...t){let e=0;for(_(r)&&(r=t[e++]),r||(r={});e<t.length;e++)if(b(t[e])){for(const o of Object.keys(t[e]))I(o)&&(b(r[o])&&b(t[e][o])?h(r[o],t[e][o]):r[o]=t[e][o]);v(r,t[e])}return r}const f="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",w="",y={rootMargin:"0px",threshold:0},u="data-lazy-timeout-id";class E{constructor(t){this.options={loading:f,error:w,observerOptions:y,log:!0,lifecycle:{},logLevel:"error"},this._images=new WeakMap,this.config(t)}config(t={}){h(this.options,t)}mount(t,e){if(!t)return;const{src:o,loading:i,error:s,lifecycle:n,delay:c}=this._valueFormatter(typeof e=="string"?e:e.value);this._lifecycle(a.LOADING,n,t),t.setAttribute("src",i||f),l||(this.loadImages(t,o,s,n),this._log(()=>{this._logger("Not support IntersectionObserver!")})),this._initIntersectionObserver(t,o,s,n,c)}update(t,e){var c;if(!t)return;(c=this._realObserver(t))==null||c.unobserve(t);const{src:o,error:i,lifecycle:s,delay:n}=this._valueFormatter(typeof e=="string"?e:e.value);this._initIntersectionObserver(t,o,i,s,n)}unmount(t){var e;t&&((e=this._realObserver(t))==null||e.unobserve(t),this._images.delete(t))}loadImages(t,e,o,i){this._setImageSrc(t,e,o,i)}_setImageSrc(t,e,o,i){t.tagName.toLowerCase()==="img"?(e&&t.getAttribute("src")!==e&&t.setAttribute("src",e),this._listenImageStatus(t,()=>{this._lifecycle(a.LOADED,i,t)},()=>{var s;t.onload=null,this._lifecycle(a.ERROR,i,t),(s=this._realObserver(t))==null||s.disconnect(),o&&t.getAttribute("src")!==o&&t.setAttribute("src",o),this._log(()=>{this._logger(`Image failed to load!And failed src was: ${e} `)})})):t.style.backgroundImage=`url('${e}')`}_initIntersectionObserver(t,e,o,i,s){var c;const n=this.options.observerOptions;this._images.set(t,new IntersectionObserver(p=>{Array.prototype.forEach.call(p,d=>{s&&s>0?this._delayedIntersectionCallback(t,d,s,e,o,i):this._intersectionCallback(t,d,e,o,i)})},n)),(c=this._realObserver(t))==null||c.observe(t)}_intersectionCallback(t,e,o,i,s){var n;e.isIntersecting&&((n=this._realObserver(t))==null||n.unobserve(e.target),this._setImageSrc(t,o,i,s))}_delayedIntersectionCallback(t,e,o,i,s,n){if(e.isIntersecting){if(e.target.hasAttribute(u))return;const c=setTimeout(()=>{this._intersectionCallback(t,e,i,s,n),e.target.removeAttribute(u)},o);e.target.setAttribute(u,String(c))}else e.target.hasAttribute(u)&&(clearTimeout(Number(e.target.getAttribute(u))),e.target.removeAttribute(u))}_listenImageStatus(t,e,o){t.onload=e,t.onerror=o}_valueFormatter(t){let e=t,o=this.options.loading,i=this.options.error,s=this.options.lifecycle,n=this.options.delay;return b(t)&&(e=t.src,o=t.loading||this.options.loading,i=t.error||this.options.error,s=t.lifecycle||this.options.lifecycle,n=t.delay||this.options.delay),{src:e,loading:o,error:i,lifecycle:s,delay:n}}_log(t){this.options.log&&t()}_lifecycle(t,e,o){switch(t){case a.LOADING:o==null||o.setAttribute("lazy",a.LOADING),e!=null&&e.loading&&e.loading(o);break;case a.LOADED:o==null||o.setAttribute("lazy",a.LOADED),e!=null&&e.loaded&&e.loaded(o);break;case a.ERROR:o==null||o.setAttribute("lazy",a.ERROR),e!=null&&e.error&&e.error(o);break}}_realObserver(t){return this._images.get(t)}_logger(t,...e){let o=console.error;switch(this.options.logLevel){case"error":o=console.error;break;case"warn":o=console.warn;break;case"info":o=console.info;break;case"debug":o=console.debug;break}o(t,e)}}const R={install(r,t){const e=new E(t);r.config.globalProperties.$Lazyload=e,r.provide("Lazyload",e),r.directive("lazy",{mounted:e.mount.bind(e),updated:e.update.bind(e),unmounted:e.unmount.bind(e)})}};export{R as i};