vue3-img-lazyload/dist/index.min.js

Vue3 image lazyload

/*!
 * Vue3-Lazyload.js v1.4.0
 * A Vue3.x image lazyload plugin
 * (c) 2025 MuRong <admin@imuboy.cn>
 * Released under the MIT License.
 */
((e,t)=>{"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueLazyload={},e.vue)})(this,function(e,i){var s,t;(t=s=s||{}).LOADING="loading",t.LOADED="loaded",t.ERROR="error";let r="undefined"!=typeof window&&null!==window,a=(()=>r&&"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype&&("isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get(){return 0<this.intersectionRatio}}),!0))(),c=Object.prototype.propertyIsEnumerable,u=Object.getOwnPropertySymbols;function d(e){return"function"==typeof e||"[object Object]"===toString.call(e)}function g(t,...r){let o=0;var e,i;for(t=(t=("object"==typeof(e=t)?null===e:"function"!=typeof e)?r[o++]:t)||{};o<r.length;o++)if(d(r[o])){for(let e of Object.keys(r[o]))"__proto__"!==(i=e)&&"constructor"!==i&&"prototype"!==i&&(d(t[e])&&d(r[o][e])?g(t[e],r[o][e]):t[e]=r[o][e]);l=n=a=s=void 0;var n,s=t,a=[r[o]];if(!d(s))throw new TypeError("expected the first argument to be an object");if(0!==a.length&&"function"==typeof Symbol&&"function"==typeof u)for(var l of a)for(n of u(l))c.call(l,n)&&(s[n]=l[n])}}let l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";let b="data-lazy-timeout-id";class n{options={loading:l,error:"",observerOptions:{rootMargin:"0px",threshold:0},log:!0,lifecycle:{},logLevel:"error"};_images=new WeakMap;constructor(e){this.config(e)}config(e={}){g(this.options,e)}mount(e,t){var r,o,i,n;e&&({src:t,loading:r,error:o,lifecycle:i,delay:n}=this._valueFormatter("string"==typeof t?t:t.value),this._lifecycle(s.LOADING,i,e),e.setAttribute("src",r||l),a||(this.loadImages(e,t,o,i),this._log(()=>{this._logger("Not support IntersectionObserver!")})),this._initIntersectionObserver(e,t,o,i,n))}update(e,t){var r,o,i;e&&(this._realObserver(e)?.unobserve(e),{src:t,error:r,lifecycle:o,delay:i}=this._valueFormatter("string"==typeof t?t:t.value),this._initIntersectionObserver(e,t,r,o,i))}unmount(e){e&&(this._realObserver(e)?.unobserve(e),this._images.delete(e))}loadImages(e,t,r,o){this._setImageSrc(e,t,r,o)}_setImageSrc(e,t,r,o){"img"===e.tagName.toLowerCase()?(t&&e.getAttribute("src")!==t&&e.setAttribute("src",t),this._listenImageStatus(e,()=>{this._lifecycle(s.LOADED,o,e)},()=>{e.onload=null,this._lifecycle(s.ERROR,o,e),this._realObserver(e)?.disconnect(),r&&e.getAttribute("src")!==r&&e.setAttribute("src",r),this._log(()=>{this._logger(`Image failed to load!And failed src was: ${t} `)})})):e.style.backgroundImage=`url('${t}')`}_initIntersectionObserver(t,r,o,i,n){var e=this.options.observerOptions;this._images.set(t,new IntersectionObserver(e=>{Array.prototype.forEach.call(e,e=>{n&&0<n?this._delayedIntersectionCallback(t,e,n,r,o,i):this._intersectionCallback(t,e,r,o,i)})},e)),this._realObserver(t)?.observe(t)}_intersectionCallback(e,t,r,o,i){t.isIntersecting&&(this._realObserver(e)?.unobserve(t.target),this._setImageSrc(e,r,o,i))}_delayedIntersectionCallback(e,t,r,o,i,n){t.isIntersecting?t.target.hasAttribute(b)||(r=setTimeout(()=>{this._intersectionCallback(e,t,o,i,n),t.target.removeAttribute(b)},r),t.target.setAttribute(b,String(r))):t.target.hasAttribute(b)&&(clearTimeout(Number(t.target.getAttribute(b))),t.target.removeAttribute(b))}_listenImageStatus(e,t,r){e.onload=t,e.onerror=r}_valueFormatter(e){let t=e,r=this.options.loading,o=this.options.error,i=this.options.lifecycle,n=this.options.delay;return d(e)&&(t=e.src,r=e.loading||this.options.loading,o=e.error||this.options.error,i=e.lifecycle||this.options.lifecycle,n=e.delay||this.options.delay),{src:t,loading:r,error:o,lifecycle:i,delay:n}}_log(e){this.options.log&&e()}_lifecycle(e,t,r){switch(e){case s.LOADING:r?.setAttribute("lazy",s.LOADING),t?.loading&&t.loading(r);break;case s.LOADED:r?.setAttribute("lazy",s.LOADED),t?.loaded&&t.loaded(r);break;case s.ERROR:r?.setAttribute("lazy",s.ERROR),t?.error&&t.error(r)}}_realObserver(e){return this._images.get(e)}_logger(e,...t){let r=console.error;switch(this.options.logLevel){case"error":r=console.error;break;case"warn":r=console.warn;break;case"info":r=console.info;break;case"debug":r=console.debug}r(e,t)}}e.default={install(e,t){t=new n(t);e.config.globalProperties.$Lazyload=t,e.provide("Lazyload",t),e.directive("lazy",{mounted:t.mount.bind(t),updated:t.update.bind(t),unmounted:t.unmount.bind(t)})}},e.useLazyload=function(t,e){let r=i.ref(null),o=new n(e);return i.onMounted(()=>{r.value&&o.mount(r.value,t.value)}),i.onUnmounted(()=>{r.value&&o.unmount(r.value)}),i.watch(t,e=>{t.value&&o.update(r.value,e)}),r},Object.defineProperty(e,"__esModule",{value:!0})});