From d22a40019a5e62fd9006039e80723d3ee81fc844 Mon Sep 17 00:00:00 2001 From: justJokee Date: Sat, 15 Jan 2022 21:50:04 +0800 Subject: [PATCH] feat: add preload image attributes to image instance --- .gitignore | 1 + src/lazy-image.js | 2 +- src/listener.js | 6 +- src/util.js | 8 +- vue-lazyload.esm.js | 356 ++++++++++---------------------------------- vue-lazyload.js | 10 +- 6 files changed, 90 insertions(+), 293 deletions(-) diff --git a/.gitignore b/.gitignore index d1d1fc1..cf3296b 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ lib npm-debug.log package-lock.json .idea +.history \ No newline at end of file diff --git a/src/lazy-image.js b/src/lazy-image.js index 8acdbd9..5d584b5 100644 --- a/src/lazy-image.js +++ b/src/lazy-image.js @@ -83,7 +83,7 @@ const LazyImage = (lazyManager) => { return } const src = this.options.src - loadImageAsync({ src }, ({ src }) => { + loadImageAsync({ src, el: this.$el }, ({ src }) => { this.renderSrc = src this.state.loaded = true }, e => { diff --git a/src/listener.js b/src/listener.js index 2944ef3..6ef5b62 100644 --- a/src/listener.js +++ b/src/listener.js @@ -124,7 +124,8 @@ export default class ReactiveListener { this.state.loading = true loadImageAsync({ src: this.loading, - cors: this.cors + cors: this.cors, + el: this.el }, data => { this.render('loading', false) this.state.loading = false @@ -163,7 +164,8 @@ export default class ReactiveListener { loadImageAsync({ src: this.src, - cors: this.cors + cors: this.cors, + el: this.el }, data => { this.naturalHeight = data.naturalHeight this.naturalWidth = data.naturalWidth diff --git a/src/util.js b/src/util.js index d927816..5681cc0 100644 --- a/src/util.js +++ b/src/util.js @@ -218,12 +218,18 @@ const _ = { } const loadImageAsync = (item, resolve, reject) => { + const attributes = item.el.attributes let image = new Image() if (!item || !item.src) { const err = new Error('image src is required') return reject(err) } - + // 将图片预配置的attributes赋值给image实例 + for (let i = 0; i < attributes.length; i++) { + if (!['id', 'class', 'src'].includes(attributes[i].name)) { + image.setAttribute(attributes[i].name, attributes[i].value) + } + } image.src = item.src if (item.cors) { image.crossOrigin = item.cors diff --git a/vue-lazyload.esm.js b/vue-lazyload.esm.js index b661b19..5fd334f 100644 --- a/vue-lazyload.esm.js +++ b/vue-lazyload.esm.js @@ -1,303 +1,90 @@ /*! * Vue-Lazyload.js v1.3.4 - * (c) 2021 Awe + * (c) 2022 Awe * Released under the MIT License. */ -/*! - * is-primitive - * - * Copyright (c) 2014-2015, Jon Schlinkert. - * Licensed under the MIT License. - */ - -// see http://jsperf.com/testing-value-is-primitive/7 - -var isPrimitive = function isPrimitive(value) { - return value == null || typeof value !== 'function' && typeof value !== 'object'; -}; - -var isPrimitive$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - 'default': isPrimitive, - __moduleExports: isPrimitive -}); - -/*! - * assign-symbols - * - * Copyright (c) 2015, Jon Schlinkert. - * Licensed under the MIT License. - */ - -var assignSymbols = function (receiver, objects) { - if (receiver === null || typeof receiver === 'undefined') { - throw new TypeError('expected first argument to be an object.'); - } - - if (typeof objects === 'undefined' || typeof Symbol === 'undefined') { - return receiver; - } - - if (typeof Object.getOwnPropertySymbols !== 'function') { - return receiver; - } - - var isEnumerable = Object.prototype.propertyIsEnumerable; - var target = Object(receiver); - var len = arguments.length, - i = 0; +function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; +} - while (++i < len) { - var provider = Object(arguments[i]); - var names = Object.getOwnPropertySymbols(provider); +var assignSymbols$1 = createCommonjsModule(function (module) { - for (var j = 0; j < names.length; j++) { - var key = names[j]; + const toString = Object.prototype.toString; + const isEnumerable = Object.prototype.propertyIsEnumerable; + const getSymbols = Object.getOwnPropertySymbols; - if (isEnumerable.call(provider, key)) { - target[key] = provider[key]; - } + module.exports = (target, ...args) => { + if (!isObject(target)) { + throw new TypeError('expected the first argument to be an object'); } - } - return target; -}; - -var assignSymbols$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - 'default': assignSymbols, - __moduleExports: assignSymbols -}); - -var toString = Object.prototype.toString; - -/** - * Get the native `typeof` a value. - * - * @param {*} `val` - * @return {*} Native javascript type - */ - -var kindOf = function kindOf(val) { - var type = typeof val; - - // primitivies - if (type === 'undefined') { - return 'undefined'; - } - if (val === null) { - return 'null'; - } - if (val === true || val === false || val instanceof Boolean) { - return 'boolean'; - } - if (type === 'string' || val instanceof String) { - return 'string'; - } - if (type === 'number' || val instanceof Number) { - return 'number'; - } - // functions - if (type === 'function' || val instanceof Function) { - if (typeof val.constructor.name !== 'undefined' && val.constructor.name.slice(0, 9) === 'Generator') { - return 'generatorfunction'; + if (args.length === 0 || typeof Symbol !== 'function' || typeof getSymbols !== 'function') { + return target; } - return 'function'; - } - // array - if (typeof Array.isArray !== 'undefined' && Array.isArray(val)) { - return 'array'; - } + for (let arg of args) { + let names = getSymbols(arg); - // check for instances of RegExp and Date before calling `toString` - if (val instanceof RegExp) { - return 'regexp'; - } - if (val instanceof Date) { - return 'date'; - } - - // other objects - type = toString.call(val); - - if (type === '[object RegExp]') { - return 'regexp'; - } - if (type === '[object Date]') { - return 'date'; - } - if (type === '[object Arguments]') { - return 'arguments'; - } - if (type === '[object Error]') { - return 'error'; - } - if (type === '[object Promise]') { - return 'promise'; - } - - // buffer - if (isBuffer(val)) { - return 'buffer'; - } - - // es6: Map, WeakMap, Set, WeakSet - if (type === '[object Set]') { - return 'set'; - } - if (type === '[object WeakSet]') { - return 'weakset'; - } - if (type === '[object Map]') { - return 'map'; - } - if (type === '[object WeakMap]') { - return 'weakmap'; - } - if (type === '[object Symbol]') { - return 'symbol'; - } - - if (type === '[object Map Iterator]') { - return 'mapiterator'; - } - if (type === '[object Set Iterator]') { - return 'setiterator'; - } - if (type === '[object String Iterator]') { - return 'stringiterator'; - } - if (type === '[object Array Iterator]') { - return 'arrayiterator'; - } + for (let key of names) { + if (isEnumerable.call(arg, key)) { + target[key] = arg[key]; + } + } + } + return target; + }; - // typed arrays - if (type === '[object Int8Array]') { - return 'int8array'; - } - if (type === '[object Uint8Array]') { - return 'uint8array'; - } - if (type === '[object Uint8ClampedArray]') { - return 'uint8clampedarray'; - } - if (type === '[object Int16Array]') { - return 'int16array'; - } - if (type === '[object Uint16Array]') { - return 'uint16array'; + function isObject(val) { + return typeof val === 'function' || toString.call(val) === '[object Object]' || Array.isArray(val); } - if (type === '[object Int32Array]') { - return 'int32array'; - } - if (type === '[object Uint32Array]') { - return 'uint32array'; - } - if (type === '[object Float32Array]') { - return 'float32array'; - } - if (type === '[object Float64Array]') { - return 'float64array'; - } - - // must be a plain object - return 'object'; -}; - -/** - * If you need to support Safari 5-7 (8-10 yr-old browser), - * take a look at https://github.com/feross/is-buffer - */ - -function isBuffer(val) { - return val.constructor && typeof val.constructor.isBuffer === 'function' && val.constructor.isBuffer(val); -} - -var kindOf$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - 'default': kindOf, - __moduleExports: kindOf }); -var isPrimitive$2 = ( isPrimitive$1 && isPrimitive ) || isPrimitive$1; - -var assignSymbols$2 = ( assignSymbols$1 && assignSymbols ) || assignSymbols$1; +var assignSymbols$2 = /*#__PURE__*/Object.freeze({ + __proto__: null, + 'default': assignSymbols$1, + __moduleExports: assignSymbols$1 +}); -var typeOf = ( kindOf$1 && kindOf ) || kindOf$1; +var assignSymbols = ( assignSymbols$2 && assignSymbols$1 ) || assignSymbols$2; -function assign(target /*, objects*/) { - target = target || {}; - var len = arguments.length, - i = 0; - if (len === 1) { - return target; - } - while (++i < len) { - var val = arguments[i]; - if (isPrimitive$2(target)) { - target = val; - } - if (isObject(val)) { - extend(target, val); - } - } - return target; -} +var assignDeep = createCommonjsModule(function (module) { -/** - * Shallow extend - */ + const toString = Object.prototype.toString; -function extend(target, obj) { - assignSymbols$2(target, obj); + const isValidKey = key => { + return key !== '__proto__' && key !== 'constructor' && key !== 'prototype'; + }; - for (var key in obj) { - if (isValidKey(key) && hasOwn(obj, key)) { - var val = obj[key]; - if (isObject(val)) { - if (typeOf(target[key]) === 'undefined' && typeOf(val) === 'function') { - target[key] = val; + const assign = module.exports = (target, ...args) => { + let i = 0; + if (isPrimitive(target)) target = args[i++]; + if (!target) target = {}; + for (; i < args.length; i++) { + if (isObject(args[i])) { + for (const key of Object.keys(args[i])) { + if (isValidKey(key)) { + if (isObject(target[key]) && isObject(args[i][key])) { + assign(target[key], args[i][key]); + } else { + target[key] = args[i][key]; + } + } } - target[key] = assign(target[key] || {}, val); - } else { - target[key] = val; + assignSymbols(target, args[i]); } } - } - return target; -} - -/** - * Returns true if the object is a plain object or a function. - */ - -function isObject(obj) { - return typeOf(obj) === 'object' || typeOf(obj) === 'function'; -} - -/** - * Returns true if the given `key` is an own property of `obj`. - */ - -function hasOwn(obj, key) { - return Object.prototype.hasOwnProperty.call(obj, key); -} - -/** - * Returns true if the given `key` is a valid key that can be used for assigning properties. - */ - -function isValidKey(key) { - return key !== '__proto__' && key !== 'constructor' && key !== 'prototype'; -} + return target; + }; -/** - * Expose `assign` - */ + function isObject(val) { + return typeof val === 'function' || toString.call(val) === '[object Object]'; + } -var assignDeep = assign; + function isPrimitive(val) { + return typeof val === 'object' ? val === null : typeof val !== 'function'; + } +}); const inBrowser = typeof window !== 'undefined' && window !== null; @@ -512,12 +299,18 @@ const _ = { }; const loadImageAsync = (item, resolve, reject) => { + const attributes = item.el.attributes; let image = new Image(); if (!item || !item.src) { const err = new Error('image src is required'); return reject(err); } - + // 将图片预配置的attributes赋值给image实例 + for (let i = 0; i < attributes.length; i++) { + if (!['id', 'class', 'src'].includes(attributes[i].name)) { + image.setAttribute(attributes[i].name, attributes[i].value); + } + } image.src = item.src; if (item.cors) { image.crossOrigin = item.cors; @@ -571,7 +364,7 @@ const scrollParent = el => { return window; }; -function isObject$1(obj) { +function isObject(obj) { return obj !== null && typeof obj === 'object'; } @@ -745,7 +538,8 @@ class ReactiveListener { this.state.loading = true; loadImageAsync({ src: this.loading, - cors: this.cors + cors: this.cors, + el: this.el }, data => { this.render('loading', false); this.state.loading = false; @@ -784,7 +578,8 @@ class ReactiveListener { loadImageAsync({ src: this.src, - cors: this.cors + cors: this.cors, + el: this.el }, data => { this.naturalHeight = data.naturalHeight; this.naturalWidth = data.naturalWidth; @@ -1270,7 +1065,7 @@ function Lazy(Vue) { let error = this.options.error; // value is object - if (isObject$1(value)) { + if (isObject(value)) { if (!value.src && !this.options.silent) console.error('Vue Lazyload warning: miss src with ' + value); src = value.src; loading = value.loading || this.options.loading; @@ -1552,7 +1347,7 @@ const LazyImage = lazyManager => { return; } const src = this.options.src; - loadImageAsync({ src }, ({ src }) => { + loadImageAsync({ src, el: this.$el }, ({ src }) => { this.renderSrc = src; this.state.loaded = true; }, e => { @@ -1644,5 +1439,4 @@ var index = { } }; -export default index; -export { Lazy, LazyComponent, LazyContainerMananger as LazyContainer, LazyImage }; +export { Lazy, LazyComponent, LazyContainerMananger as LazyContainer, LazyImage, index as default }; diff --git a/vue-lazyload.js b/vue-lazyload.js index 2d999a5..b2661b4 100644 --- a/vue-lazyload.js +++ b/vue-lazyload.js @@ -1,12 +1,6 @@ /*! * Vue-Lazyload.js v1.3.4 - * (c) 2021 Awe + * (c) 2022 Awe * Released under the MIT License. */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).VueLazyload={})}(this,(function(t){"use strict"; -/*! - * is-primitive - * - * Copyright (c) 2014-2015, Jon Schlinkert. - * Licensed under the MIT License. - */var e=function(t){return null==t||"function"!=typeof t&&"object"!=typeof t},r=Object.freeze({__proto__:null,default:e,__moduleExports:e}),i=function(t,e){if(null==t)throw new TypeError("expected first argument to be an object.");if(void 0===e||"undefined"==typeof Symbol)return t;if("function"!=typeof Object.getOwnPropertySymbols)return t;for(var r=Object.prototype.propertyIsEnumerable,i=Object(t),n=arguments.length,s=0;++s0}}),!0;return!1}();const y="event",w="observer",_=function(){if(m)return"function"==typeof window.CustomEvent?window.CustomEvent:(t.prototype=window.Event.prototype,t);function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var r=document.createEvent("CustomEvent");return r.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),r}}();function L(t,e){if(!t.length)return;const r=t.indexOf(e);return r>-1?t.splice(r,1):void 0}function E(t,e){if("IMG"!==t.tagName||!t.getAttribute("data-srcset"))return;let r=t.getAttribute("data-srcset");const i=[],n=t.parentNode.offsetWidth*e;let s,o,a;r=r.trim().split(","),r.map((t=>{t=t.trim(),s=t.lastIndexOf(" "),-1===s?(o=t,a=999998):(o=t.substr(0,s),a=parseInt(t.substr(s+1,t.length-s-2),10)),i.push([a,o])})),i.sort((function(t,e){if(t[0]e[0])return-1;if(t[0]===e[0]){if(-1!==e[1].indexOf(".webp",e[1].length-5))return 1;if(-1!==t[1].indexOf(".webp",t[1].length-5))return-1}return 0}));let d,l="";for(let t=0;tm&&window.devicePixelRatio||t;function j(){if(!m)return!1;let t=!0;try{const e=document.createElement("canvas");e.getContext&&e.getContext("2d")&&(t=0===e.toDataURL("image/webp").indexOf("data:image/webp"))}catch(e){t=!1}return t}const x=function(){if(!m)return;let t=!1;try{let e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e)}catch(t){}return t}(),O={on(t,e,r,i=!1){x?t.addEventListener(e,r,{capture:i,passive:!0}):t.addEventListener(e,r,i)},off(t,e,r,i=!1){t.removeEventListener(e,r,i)}},$=(t,e,r)=>{let i=new Image;if(!t||!t.src){const t=new Error("image src is required");return r(t)}i.src=t.src,t.cors&&(i.crossOrigin=t.cors),i.onload=function(){e({naturalHeight:i.naturalHeight,naturalWidth:i.naturalWidth,src:i.src})},i.onerror=function(t){r(t)}},T=(t,e)=>"undefined"!=typeof getComputedStyle?getComputedStyle(t,null).getPropertyValue(e):t.style[e],I=t=>T(t,"overflow")+T(t,"overflow-y")+T(t,"overflow-x");function C(){}class H{constructor({max:t}){this.options={max:t||100},this._caches=[]}has(t){return this._caches.indexOf(t)>-1}add(t){this.has(t)||(this._caches.push(t),this._caches.length>this.options.max&&this.free())}free(){this._caches.shift()}}class S{constructor({el:t,src:e,error:r,loading:i,bindType:n,$parent:s,options:o,cors:a,elRenderer:d,imageCache:l}){this.el=t,this.src=e,this.error=r,this.loading=i,this.bindType=n,this.attempt=0,this.cors=a,this.naturalHeight=0,this.naturalWidth=0,this.options=o,this.rect=null,this.$parent=s,this.elRenderer=d,this._imageCache=l,this.performanceData={init:Date.now(),loadStart:0,loadEnd:0},this.filter(),this.initState(),this.render("loading",!1)}initState(){"dataset"in this.el?this.el.dataset.src=this.src:this.el.setAttribute("data-src",this.src),this.state={loading:!1,error:!1,loaded:!1,rendered:!1}}record(t){this.performanceData[t]=Date.now()}update({src:t,loading:e,error:r}){const i=this.src;this.src=t,this.loading=e,this.error=r,this.filter(),i!==this.src&&(this.attempt=0,this.initState())}getRect(){this.rect=this.el.getBoundingClientRect()}checkInView(){return this.getRect(),this.rect.topthis.options.preLoadTop&&this.rect.left0}filter(){(function(t){if(!(t instanceof Object))return[];if(Object.keys)return Object.keys(t);{let e=[];for(let r in t)t.hasOwnProperty(r)&&e.push(r);return e}})(this.options.filter).map((t=>{this.options.filter[t](this,this.options)}))}renderLoading(t){this.state.loading=!0,$({src:this.loading,cors:this.cors},(e=>{this.render("loading",!1),this.state.loading=!1,t()}),(()=>{t(),this.state.loading=!1,this.options.silent||console.warn(`VueLazyload log: load failed with loading image(${this.loading})`)}))}load(t=C){return this.attempt>this.options.attempt-1&&this.state.error?(this.options.silent||console.log(`VueLazyload log: ${this.src} tried too more than ${this.options.attempt} times`),void t()):this.state.rendered&&this.state.loaded?void 0:this._imageCache.has(this.src)?(this.state.loaded=!0,this.render("loaded",!0),this.state.rendered=!0,t()):void this.renderLoading((()=>{this.attempt++,this.options.adapter.beforeLoad&&this.options.adapter.beforeLoad(this,this.options),this.record("loadStart"),$({src:this.src,cors:this.cors},(e=>{this.naturalHeight=e.naturalHeight,this.naturalWidth=e.naturalWidth,this.state.loaded=!0,this.state.error=!1,this.record("loadEnd"),this.render("loaded",!1),this.state.rendered=!0,this._imageCache.add(this.src),t()}),(t=>{!this.options.silent&&console.error(t),this.state.error=!0,this.state.loaded=!1,this.render("error",!1)}))}))}render(t,e){this.elRenderer(this,t,e)}performance(){let t="loading",e=0;return this.state.loaded&&(t="loaded",e=(this.performanceData.loadEnd-this.performanceData.loadStart)/1e3),this.state.error&&(t="error"),{src:this.src,state:t,time:e}}$destroy(){this.el=null,this.src=null,this.error=null,this.loading=null,this.bindType=null,this.attempt=0}}const Q="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",R=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove"],k={rootMargin:"0px",threshold:0};function B(t){return class{constructor({preLoad:t,error:e,throttleWait:r,preLoadTop:i,dispatchEvent:n,loading:s,attempt:o,silent:a=!0,scale:d,listenEvents:l,hasbind:h,filter:c,adapter:u,observer:p,observerOptions:f}){this.version='"1.3.4"',this.mode=y,this.ListenerQueue=[],this.TargetIndex=0,this.TargetQueue=[],this.options={silent:a,dispatchEvent:!!n,throttleWait:r||200,preLoad:t||1.3,preLoadTop:i||0,error:e||Q,loading:s||Q,attempt:o||3,scale:d||A(d),ListenEvents:l||R,hasbind:!1,supportWebp:j(),filter:c||{},adapter:u||{},observer:!!p,observerOptions:f||k},this._initEvent(),this._imageCache=new H({max:200}),this.lazyLoadHandler=function(t,e){let r=null,i=null,n=0,s=!1;return function(){if(s=!0,r)return;let o=Date.now()-n,a=this,d=arguments,l=function(){n=Date.now(),r=!1,t.apply(a,d)};o>=e?l():r=setTimeout(l,e),s&&(clearTimeout(i),i=setTimeout(l,2*e))}}(this._lazyLoadHandler.bind(this),this.options.throttleWait),this.setMode(this.options.observer?w:y)}config(t={}){g(this.options,t)}performance(){let t=[];return this.ListenerQueue.map((e=>{t.push(e.performance())})),t}addLazyBox(t){this.ListenerQueue.push(t),m&&(this._addListenerTarget(window),this._observer&&this._observer.observe(t.el),t.$el&&t.$el.parentNode&&this._addListenerTarget(t.$el.parentNode))}add(e,r,i){if(function(t,e){let r=!1;for(let i=0,n=t.length;it.el===e)))return this.update(e,r),t.nextTick(this.lazyLoadHandler);let{src:n,loading:s,error:o,cors:a}=this._valueFormatter(r.value);t.nextTick((()=>{n=E(e,this.options.scale)||n,this._observer&&this._observer.observe(e);const d=Object.keys(r.modifiers)[0];let l;d&&(l=i.context.$refs[d],l=l?l.$el||l:document.getElementById(d)),l||(l=(t=>{if(!m)return;if(!(t instanceof HTMLElement))return window;let e=t;for(;e&&e!==document.body&&e!==document.documentElement&&e.parentNode;){if(/(scroll|auto)/.test(I(e)))return e;e=e.parentNode}return window})(e));const h=new S({bindType:r.arg,$parent:l,el:e,loading:s,error:o,src:n,cors:a,elRenderer:this._elRenderer.bind(this),options:this.options,imageCache:this._imageCache});this.ListenerQueue.push(h),m&&(this._addListenerTarget(window),this._addListenerTarget(l)),this.lazyLoadHandler(),t.nextTick((()=>this.lazyLoadHandler()))}))}update(e,r,i){let{src:n,loading:s,error:o}=this._valueFormatter(r.value);n=E(e,this.options.scale)||n;const a=z(this.ListenerQueue,(t=>t.el===e));a?a.update({src:n,loading:s,error:o}):this.add(e,r,i),this._observer&&(this._observer.unobserve(e),this._observer.observe(e)),this.lazyLoadHandler(),t.nextTick((()=>this.lazyLoadHandler()))}remove(t){if(!t)return;this._observer&&this._observer.unobserve(t);const e=z(this.ListenerQueue,(e=>e.el===t));e&&(this._removeListenerTarget(e.$parent),this._removeListenerTarget(window),L(this.ListenerQueue,e),e.$destroy())}removeComponent(t){t&&(L(this.ListenerQueue,t),this._observer&&this._observer.unobserve(t.el),t.$parent&&t.$el.parentNode&&this._removeListenerTarget(t.$el.parentNode),this._removeListenerTarget(window))}setMode(t){v||t!==w||(t=y),this.mode=t,t===y?(this._observer&&(this.ListenerQueue.forEach((t=>{this._observer.unobserve(t.el)})),this._observer=null),this.TargetQueue.forEach((t=>{this._initListen(t.el,!0)}))):(this.TargetQueue.forEach((t=>{this._initListen(t.el,!1)})),this._initIntersectionObserver())}_addListenerTarget(t){if(!t)return;let e=z(this.TargetQueue,(e=>e.el===t));return e?e.childrenCount++:(e={el:t,id:++this.TargetIndex,childrenCount:1,listened:!0},this.mode===y&&this._initListen(e.el,!0),this.TargetQueue.push(e)),this.TargetIndex}_removeListenerTarget(t){this.TargetQueue.forEach(((e,r)=>{e.el===t&&(e.childrenCount--,e.childrenCount||(this._initListen(e.el,!1),this.TargetQueue.splice(r,1),e=null))}))}_initListen(t,e){this.options.ListenEvents.forEach((r=>O[e?"on":"off"](t,r,this.lazyLoadHandler)))}_initEvent(){this.Event={listeners:{loading:[],loaded:[],error:[]}},this.$on=(t,e)=>{this.Event.listeners[t]||(this.Event.listeners[t]=[]),this.Event.listeners[t].push(e)},this.$once=(t,e)=>{const r=this;this.$on(t,(function i(){r.$off(t,i),e.apply(r,arguments)}))},this.$off=(t,e)=>{if(e)L(this.Event.listeners[t],e);else{if(!this.Event.listeners[t])return;this.Event.listeners[t].length=0}},this.$emit=(t,e,r)=>{this.Event.listeners[t]&&this.Event.listeners[t].forEach((t=>t(e,r)))}}_lazyLoadHandler(){const t=[];this.ListenerQueue.forEach(((e,r)=>{e.el&&e.el.parentNode||t.push(e);e.checkInView()&&e.load()})),t.forEach((t=>{L(this.ListenerQueue,t),t.$destroy()}))}_initIntersectionObserver(){v&&(this._observer=new IntersectionObserver(this._observerHandler.bind(this),this.options.observerOptions),this.ListenerQueue.length&&this.ListenerQueue.forEach((t=>{this._observer.observe(t.el)})))}_observerHandler(t,e){t.forEach((t=>{t.isIntersecting&&this.ListenerQueue.forEach((e=>{if(e.el===t.target){if(e.state.loaded)return this._observer.unobserve(e.el);e.load()}}))}))}_elRenderer(t,e,r){if(!t.el)return;const{el:i,bindType:n}=t;let s;switch(e){case"loading":s=t.loading;break;case"error":s=t.error;break;default:s=t.src}if(n?i.style[n]='url("'+s+'")':i.getAttribute("src")!==s&&i.setAttribute("src",s),i.setAttribute("lazy",e),this.$emit(e,t,r),this.options.adapter[e]&&this.options.adapter[e](t,this.options),this.options.dispatchEvent){const r=new _(e,{detail:t});i.dispatchEvent(r)}}_valueFormatter(t){let e=t,r=this.options.loading,i=this.options.error;var n;return null!==(n=t)&&"object"==typeof n&&(t.src||this.options.silent||console.error("Vue Lazyload warning: miss src with "+t),e=t.src,r=t.loading||this.options.loading,i=t.error||this.options.error),{src:e,loading:r,error:i}}}}B.install=(t,e={})=>{const r=new(B(t))(e);"2"===t.version.split(".")[0]?t.directive("lazy",{bind:r.add.bind(r),update:r.update.bind(r),componentUpdated:r.lazyLoadHandler.bind(r),unbind:r.remove.bind(r)}):t.directive("lazy",{bind:r.lazyLoadHandler.bind(r),update(t,e){g(this.vm.$refs,this.vm.$els),r.add(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){r.remove(this.el)}})};const W=t=>({props:{tag:{type:String,default:"div"}},render(t){return t(this.tag,null,this.show?this.$slots.default:null)},data:()=>({el:null,state:{loaded:!1},rect:{},show:!1}),mounted(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeDestroy(){t.removeComponent(this)},methods:{getRect(){this.rect=this.$el.getBoundingClientRect()},checkInView(){return this.getRect(),m&&this.rect.top0&&this.rect.left0},load(){this.show=!0,this.state.loaded=!0,this.$emit("show",this)},destroy(){return this.$destroy}}});W.install=function(t,e={}){const r=new(B(t))(e);t.component("lazy-component",W(r))};class D{constructor({lazy:t}){this.lazy=t,t.lazyContainerMananger=this,this._queue=[]}bind(t,e,r){const i=new P({el:t,binding:e,vnode:r,lazy:this.lazy});this._queue.push(i)}update(t,e,r){const i=z(this._queue,(e=>e.el===t));i&&i.update({el:t,binding:e,vnode:r})}unbind(t,e,r){const i=z(this._queue,(e=>e.el===t));i&&(i.clear(),L(this._queue,i))}}const V={selector:"img"};class P{constructor({el:t,binding:e,vnode:r,lazy:i}){this.el=null,this.vnode=r,this.binding=e,this.options={},this.lazy=i,this._queue=[],this.update({el:t,binding:e})}update({el:t,binding:e}){this.el=t,this.options=g({},V,e.value);this.getImgs().forEach((t=>{this.lazy.add(t,g({},this.binding,{value:{src:"dataset"in t?t.dataset.src:t.getAttribute("data-src"),error:("dataset"in t?t.dataset.error:t.getAttribute("data-error"))||this.options.error,loading:("dataset"in t?t.dataset.loading:t.getAttribute("data-loading"))||this.options.loading}}),this.vnode)}))}getImgs(){return function(t){let e=t.length;const r=[];for(let i=0;ithis.lazy.remove(t))),this.vnode=null,this.binding=null,this.lazy=null}}P.install=(t,e={})=>{const r=new(B(t))(e),i=new P({lazy:r});"2"===t.version.split(".")[0]?t.directive("lazy-container",{bind:i.bind.bind(i),componentUpdated:i.update.bind(i),unbind:i.unbind.bind(i)}):t.directive("lazy-container",{update(t,e){i.update(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){i.unbind(this.el)}})};const M=t=>({props:{src:[String,Object],tag:{type:String,default:"img"}},render(t){return t(this.tag,{attrs:{src:this.renderSrc}},this.$slots.default)},data:()=>({el:null,options:{src:"",error:"",loading:"",attempt:t.options.attempt},state:{loaded:!1,error:!1,attempt:0},rect:{},renderSrc:""}),watch:{src(){this.init(),t.addLazyBox(this),t.lazyLoadHandler()}},created(){this.init(),this.renderSrc=this.options.loading},mounted(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeDestroy(){t.removeComponent(this)},methods:{init(){const{src:e,loading:r,error:i}=t._valueFormatter(this.src);this.state.loaded=!1,this.options.src=e,this.options.error=i,this.options.loading=r,this.renderSrc=this.options.loading},getRect(){this.rect=this.$el.getBoundingClientRect()},checkInView(){return this.getRect(),m&&this.rect.top0&&this.rect.left0},load(e=C){if(this.state.attempt>this.options.attempt-1&&this.state.error)return t.options.silent||console.log(`VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`),void e();const r=this.options.src;$({src:r},(({src:t})=>{this.renderSrc=t,this.state.loaded=!0}),(t=>{this.state.attempt++,this.renderSrc=this.options.error,this.state.error=!0}))}}});M.install=(t,e={})=>{const r=new(B(t))(e);t.component("lazy-image",M(r))};var N={install(t,e={}){const r=new(B(t))(e),i=new D({lazy:r}),n="2"===t.version.split(".")[0];t.prototype.$Lazyload=r,e.lazyComponent&&t.component("lazy-component",W(r)),e.lazyImage&&t.component("lazy-image",M(r)),n?(t.directive("lazy",{bind:r.add.bind(r),update:r.update.bind(r),componentUpdated:r.lazyLoadHandler.bind(r),unbind:r.remove.bind(r)}),t.directive("lazy-container",{bind:i.bind.bind(i),componentUpdated:i.update.bind(i),unbind:i.unbind.bind(i)})):(t.directive("lazy",{bind:r.lazyLoadHandler.bind(r),update(t,e){g(this.vm.$refs,this.vm.$els),r.add(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){r.remove(this.el)}}),t.directive("lazy-container",{update(t,e){i.update(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){i.unbind(this.el)}}))}};t.Lazy=B,t.LazyComponent=W,t.LazyContainer=D,t.LazyImage=M,t.default=N,Object.defineProperty(t,"__esModule",{value:!0})})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).VueLazyload={})}(this,(function(t){"use strict";function e(t,e){return t(e={exports:{}},e.exports),e.exports}var i=e((function(t){const e=Object.prototype.toString,i=Object.prototype.propertyIsEnumerable,r=Object.getOwnPropertySymbols;t.exports=(t,...s)=>{if("function"!=typeof(n=t)&&"[object Object]"!==e.call(n)&&!Array.isArray(n))throw new TypeError("expected the first argument to be an object");var n;if(0===s.length||"function"!=typeof Symbol||"function"!=typeof r)return t;for(let e of s){let s=r(e);for(let r of s)i.call(e,r)&&(t[r]=e[r])}return t}})),r=Object.freeze({__proto__:null,default:i,__moduleExports:i}),s=r&&i||r,n=e((function(t){const e=Object.prototype.toString,i=t=>"__proto__"!==t&&"constructor"!==t&&"prototype"!==t,r=t.exports=(t,...e)=>{let o=0;var a;for(("object"==typeof(a=t)?null===a:"function"!=typeof a)&&(t=e[o++]),t||(t={});o0}}),!0;return!1}();const d="event",l="observer",h=function(){if(o)return"function"==typeof window.CustomEvent?window.CustomEvent:(t.prototype=window.Event.prototype,t);function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}}();function c(t,e){if(!t.length)return;const i=t.indexOf(e);return i>-1?t.splice(i,1):void 0}function u(t,e){if("IMG"!==t.tagName||!t.getAttribute("data-srcset"))return;let i=t.getAttribute("data-srcset");const r=[],s=t.parentNode.offsetWidth*e;let n,o,a;i=i.trim().split(","),i.map((t=>{t=t.trim(),n=t.lastIndexOf(" "),-1===n?(o=t,a=999998):(o=t.substr(0,n),a=parseInt(t.substr(n+1,t.length-n-2),10)),r.push([a,o])})),r.sort((function(t,e){if(t[0]e[0])return-1;if(t[0]===e[0]){if(-1!==e[1].indexOf(".webp",e[1].length-5))return 1;if(-1!==t[1].indexOf(".webp",t[1].length-5))return-1}return 0}));let d,l="";for(let t=0;to&&window.devicePixelRatio||t;function g(){if(!o)return!1;let t=!0;try{const e=document.createElement("canvas");e.getContext&&e.getContext("2d")&&(t=0===e.toDataURL("image/webp").indexOf("data:image/webp"))}catch(e){t=!1}return t}const b=function(){if(!o)return;let t=!1;try{let e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e)}catch(t){}return t}(),m={on(t,e,i,r=!1){b?t.addEventListener(e,i,{capture:r,passive:!0}):t.addEventListener(e,i,r)},off(t,e,i,r=!1){t.removeEventListener(e,i,r)}},v=(t,e,i)=>{const r=t.el.attributes;let s=new Image;if(!t||!t.src){const t=new Error("image src is required");return i(t)}for(let t=0;t"undefined"!=typeof getComputedStyle?getComputedStyle(t,null).getPropertyValue(e):t.style[e],w=t=>y(t,"overflow")+y(t,"overflow-y")+y(t,"overflow-x");function L(){}class _{constructor({max:t}){this.options={max:t||100},this._caches=[]}has(t){return this._caches.indexOf(t)>-1}add(t){this.has(t)||(this._caches.push(t),this._caches.length>this.options.max&&this.free())}free(){this._caches.shift()}}class z{constructor({el:t,src:e,error:i,loading:r,bindType:s,$parent:n,options:o,cors:a,elRenderer:d,imageCache:l}){this.el=t,this.src=e,this.error=i,this.loading=r,this.bindType=s,this.attempt=0,this.cors=a,this.naturalHeight=0,this.naturalWidth=0,this.options=o,this.rect=null,this.$parent=n,this.elRenderer=d,this._imageCache=l,this.performanceData={init:Date.now(),loadStart:0,loadEnd:0},this.filter(),this.initState(),this.render("loading",!1)}initState(){"dataset"in this.el?this.el.dataset.src=this.src:this.el.setAttribute("data-src",this.src),this.state={loading:!1,error:!1,loaded:!1,rendered:!1}}record(t){this.performanceData[t]=Date.now()}update({src:t,loading:e,error:i}){const r=this.src;this.src=t,this.loading=e,this.error=i,this.filter(),r!==this.src&&(this.attempt=0,this.initState())}getRect(){this.rect=this.el.getBoundingClientRect()}checkInView(){return this.getRect(),this.rect.topthis.options.preLoadTop&&this.rect.left0}filter(){(function(t){if(!(t instanceof Object))return[];if(Object.keys)return Object.keys(t);{let e=[];for(let i in t)t.hasOwnProperty(i)&&e.push(i);return e}})(this.options.filter).map((t=>{this.options.filter[t](this,this.options)}))}renderLoading(t){this.state.loading=!0,v({src:this.loading,cors:this.cors,el:this.el},(e=>{this.render("loading",!1),this.state.loading=!1,t()}),(()=>{t(),this.state.loading=!1,this.options.silent||console.warn(`VueLazyload log: load failed with loading image(${this.loading})`)}))}load(t=L){return this.attempt>this.options.attempt-1&&this.state.error?(this.options.silent||console.log(`VueLazyload log: ${this.src} tried too more than ${this.options.attempt} times`),void t()):this.state.rendered&&this.state.loaded?void 0:this._imageCache.has(this.src)?(this.state.loaded=!0,this.render("loaded",!0),this.state.rendered=!0,t()):void this.renderLoading((()=>{this.attempt++,this.options.adapter.beforeLoad&&this.options.adapter.beforeLoad(this,this.options),this.record("loadStart"),v({src:this.src,cors:this.cors,el:this.el},(e=>{this.naturalHeight=e.naturalHeight,this.naturalWidth=e.naturalWidth,this.state.loaded=!0,this.state.error=!1,this.record("loadEnd"),this.render("loaded",!1),this.state.rendered=!0,this._imageCache.add(this.src),t()}),(t=>{!this.options.silent&&console.error(t),this.state.error=!0,this.state.loaded=!1,this.render("error",!1)}))}))}render(t,e){this.elRenderer(this,t,e)}performance(){let t="loading",e=0;return this.state.loaded&&(t="loaded",e=(this.performanceData.loadEnd-this.performanceData.loadStart)/1e3),this.state.error&&(t="error"),{src:this.src,state:t,time:e}}$destroy(){this.el=null,this.src=null,this.error=null,this.loading=null,this.bindType=null,this.attempt=0}}const E="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",A=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove"],x={rootMargin:"0px",threshold:0};function $(t){return class{constructor({preLoad:t,error:e,throttleWait:i,preLoadTop:r,dispatchEvent:s,loading:n,attempt:o,silent:a=!0,scale:h,listenEvents:c,hasbind:u,filter:p,adapter:b,observer:m,observerOptions:v}){this.version='"1.3.4"',this.mode=d,this.ListenerQueue=[],this.TargetIndex=0,this.TargetQueue=[],this.options={silent:a,dispatchEvent:!!s,throttleWait:i||200,preLoad:t||1.3,preLoadTop:r||0,error:e||E,loading:n||E,attempt:o||3,scale:h||f(h),ListenEvents:c||A,hasbind:!1,supportWebp:g(),filter:p||{},adapter:b||{},observer:!!m,observerOptions:v||x},this._initEvent(),this._imageCache=new _({max:200}),this.lazyLoadHandler=function(t,e){let i=null,r=null,s=0,n=!1;return function(){if(n=!0,i)return;let o=Date.now()-s,a=this,d=arguments,l=function(){s=Date.now(),i=!1,t.apply(a,d)};o>=e?l():i=setTimeout(l,e),n&&(clearTimeout(r),r=setTimeout(l,2*e))}}(this._lazyLoadHandler.bind(this),this.options.throttleWait),this.setMode(this.options.observer?l:d)}config(t={}){n(this.options,t)}performance(){let t=[];return this.ListenerQueue.map((e=>{t.push(e.performance())})),t}addLazyBox(t){this.ListenerQueue.push(t),o&&(this._addListenerTarget(window),this._observer&&this._observer.observe(t.el),t.$el&&t.$el.parentNode&&this._addListenerTarget(t.$el.parentNode))}add(e,i,r){if(function(t,e){let i=!1;for(let r=0,s=t.length;rt.el===e)))return this.update(e,i),t.nextTick(this.lazyLoadHandler);let{src:s,loading:n,error:a,cors:d}=this._valueFormatter(i.value);t.nextTick((()=>{s=u(e,this.options.scale)||s,this._observer&&this._observer.observe(e);const l=Object.keys(i.modifiers)[0];let h;l&&(h=r.context.$refs[l],h=h?h.$el||h:document.getElementById(l)),h||(h=(t=>{if(!o)return;if(!(t instanceof HTMLElement))return window;let e=t;for(;e&&e!==document.body&&e!==document.documentElement&&e.parentNode;){if(/(scroll|auto)/.test(w(e)))return e;e=e.parentNode}return window})(e));const c=new z({bindType:i.arg,$parent:h,el:e,loading:n,error:a,src:s,cors:d,elRenderer:this._elRenderer.bind(this),options:this.options,imageCache:this._imageCache});this.ListenerQueue.push(c),o&&(this._addListenerTarget(window),this._addListenerTarget(h)),this.lazyLoadHandler(),t.nextTick((()=>this.lazyLoadHandler()))}))}update(e,i,r){let{src:s,loading:n,error:o}=this._valueFormatter(i.value);s=u(e,this.options.scale)||s;const a=p(this.ListenerQueue,(t=>t.el===e));a?a.update({src:s,loading:n,error:o}):this.add(e,i,r),this._observer&&(this._observer.unobserve(e),this._observer.observe(e)),this.lazyLoadHandler(),t.nextTick((()=>this.lazyLoadHandler()))}remove(t){if(!t)return;this._observer&&this._observer.unobserve(t);const e=p(this.ListenerQueue,(e=>e.el===t));e&&(this._removeListenerTarget(e.$parent),this._removeListenerTarget(window),c(this.ListenerQueue,e),e.$destroy())}removeComponent(t){t&&(c(this.ListenerQueue,t),this._observer&&this._observer.unobserve(t.el),t.$parent&&t.$el.parentNode&&this._removeListenerTarget(t.$el.parentNode),this._removeListenerTarget(window))}setMode(t){a||t!==l||(t=d),this.mode=t,t===d?(this._observer&&(this.ListenerQueue.forEach((t=>{this._observer.unobserve(t.el)})),this._observer=null),this.TargetQueue.forEach((t=>{this._initListen(t.el,!0)}))):(this.TargetQueue.forEach((t=>{this._initListen(t.el,!1)})),this._initIntersectionObserver())}_addListenerTarget(t){if(!t)return;let e=p(this.TargetQueue,(e=>e.el===t));return e?e.childrenCount++:(e={el:t,id:++this.TargetIndex,childrenCount:1,listened:!0},this.mode===d&&this._initListen(e.el,!0),this.TargetQueue.push(e)),this.TargetIndex}_removeListenerTarget(t){this.TargetQueue.forEach(((e,i)=>{e.el===t&&(e.childrenCount--,e.childrenCount||(this._initListen(e.el,!1),this.TargetQueue.splice(i,1),e=null))}))}_initListen(t,e){this.options.ListenEvents.forEach((i=>m[e?"on":"off"](t,i,this.lazyLoadHandler)))}_initEvent(){this.Event={listeners:{loading:[],loaded:[],error:[]}},this.$on=(t,e)=>{this.Event.listeners[t]||(this.Event.listeners[t]=[]),this.Event.listeners[t].push(e)},this.$once=(t,e)=>{const i=this;this.$on(t,(function r(){i.$off(t,r),e.apply(i,arguments)}))},this.$off=(t,e)=>{if(e)c(this.Event.listeners[t],e);else{if(!this.Event.listeners[t])return;this.Event.listeners[t].length=0}},this.$emit=(t,e,i)=>{this.Event.listeners[t]&&this.Event.listeners[t].forEach((t=>t(e,i)))}}_lazyLoadHandler(){const t=[];this.ListenerQueue.forEach(((e,i)=>{e.el&&e.el.parentNode||t.push(e);e.checkInView()&&e.load()})),t.forEach((t=>{c(this.ListenerQueue,t),t.$destroy()}))}_initIntersectionObserver(){a&&(this._observer=new IntersectionObserver(this._observerHandler.bind(this),this.options.observerOptions),this.ListenerQueue.length&&this.ListenerQueue.forEach((t=>{this._observer.observe(t.el)})))}_observerHandler(t,e){t.forEach((t=>{t.isIntersecting&&this.ListenerQueue.forEach((e=>{if(e.el===t.target){if(e.state.loaded)return this._observer.unobserve(e.el);e.load()}}))}))}_elRenderer(t,e,i){if(!t.el)return;const{el:r,bindType:s}=t;let n;switch(e){case"loading":n=t.loading;break;case"error":n=t.error;break;default:n=t.src}if(s?r.style[s]='url("'+n+'")':r.getAttribute("src")!==n&&r.setAttribute("src",n),r.setAttribute("lazy",e),this.$emit(e,t,i),this.options.adapter[e]&&this.options.adapter[e](t,this.options),this.options.dispatchEvent){const i=new h(e,{detail:t});r.dispatchEvent(i)}}_valueFormatter(t){let e=t,i=this.options.loading,r=this.options.error;var s;return null!==(s=t)&&"object"==typeof s&&(t.src||this.options.silent||console.error("Vue Lazyload warning: miss src with "+t),e=t.src,i=t.loading||this.options.loading,r=t.error||this.options.error),{src:e,loading:i,error:r}}}}$.install=(t,e={})=>{const i=new($(t))(e);"2"===t.version.split(".")[0]?t.directive("lazy",{bind:i.add.bind(i),update:i.update.bind(i),componentUpdated:i.lazyLoadHandler.bind(i),unbind:i.remove.bind(i)}):t.directive("lazy",{bind:i.lazyLoadHandler.bind(i),update(t,e){n(this.vm.$refs,this.vm.$els),i.add(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){i.remove(this.el)}})};const T=t=>({props:{tag:{type:String,default:"div"}},render(t){return t(this.tag,null,this.show?this.$slots.default:null)},data:()=>({el:null,state:{loaded:!1},rect:{},show:!1}),mounted(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeDestroy(){t.removeComponent(this)},methods:{getRect(){this.rect=this.$el.getBoundingClientRect()},checkInView(){return this.getRect(),o&&this.rect.top0&&this.rect.left0},load(){this.show=!0,this.state.loaded=!0,this.$emit("show",this)},destroy(){return this.$destroy}}});T.install=function(t,e={}){const i=new($(t))(e);t.component("lazy-component",T(i))};class O{constructor({lazy:t}){this.lazy=t,t.lazyContainerMananger=this,this._queue=[]}bind(t,e,i){const r=new C({el:t,binding:e,vnode:i,lazy:this.lazy});this._queue.push(r)}update(t,e,i){const r=p(this._queue,(e=>e.el===t));r&&r.update({el:t,binding:e,vnode:i})}unbind(t,e,i){const r=p(this._queue,(e=>e.el===t));r&&(r.clear(),c(this._queue,r))}}const I={selector:"img"};class C{constructor({el:t,binding:e,vnode:i,lazy:r}){this.el=null,this.vnode=i,this.binding=e,this.options={},this.lazy=r,this._queue=[],this.update({el:t,binding:e})}update({el:t,binding:e}){this.el=t,this.options=n({},I,e.value);this.getImgs().forEach((t=>{this.lazy.add(t,n({},this.binding,{value:{src:"dataset"in t?t.dataset.src:t.getAttribute("data-src"),error:("dataset"in t?t.dataset.error:t.getAttribute("data-error"))||this.options.error,loading:("dataset"in t?t.dataset.loading:t.getAttribute("data-loading"))||this.options.loading}}),this.vnode)}))}getImgs(){return function(t){let e=t.length;const i=[];for(let r=0;rthis.lazy.remove(t))),this.vnode=null,this.binding=null,this.lazy=null}}C.install=(t,e={})=>{const i=new($(t))(e),r=new C({lazy:i});"2"===t.version.split(".")[0]?t.directive("lazy-container",{bind:r.bind.bind(r),componentUpdated:r.update.bind(r),unbind:r.unbind.bind(r)}):t.directive("lazy-container",{update(t,e){r.update(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){r.unbind(this.el)}})};const H=t=>({props:{src:[String,Object],tag:{type:String,default:"img"}},render(t){return t(this.tag,{attrs:{src:this.renderSrc}},this.$slots.default)},data:()=>({el:null,options:{src:"",error:"",loading:"",attempt:t.options.attempt},state:{loaded:!1,error:!1,attempt:0},rect:{},renderSrc:""}),watch:{src(){this.init(),t.addLazyBox(this),t.lazyLoadHandler()}},created(){this.init(),this.renderSrc=this.options.loading},mounted(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeDestroy(){t.removeComponent(this)},methods:{init(){const{src:e,loading:i,error:r}=t._valueFormatter(this.src);this.state.loaded=!1,this.options.src=e,this.options.error=r,this.options.loading=i,this.renderSrc=this.options.loading},getRect(){this.rect=this.$el.getBoundingClientRect()},checkInView(){return this.getRect(),o&&this.rect.top0&&this.rect.left0},load(e=L){if(this.state.attempt>this.options.attempt-1&&this.state.error)return t.options.silent||console.log(`VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`),void e();const i=this.options.src;v({src:i,el:this.$el},(({src:t})=>{this.renderSrc=t,this.state.loaded=!0}),(t=>{this.state.attempt++,this.renderSrc=this.options.error,this.state.error=!0}))}}});H.install=(t,e={})=>{const i=new($(t))(e);t.component("lazy-image",H(i))};var Q={install(t,e={}){const i=new($(t))(e),r=new O({lazy:i}),s="2"===t.version.split(".")[0];t.prototype.$Lazyload=i,e.lazyComponent&&t.component("lazy-component",T(i)),e.lazyImage&&t.component("lazy-image",H(i)),s?(t.directive("lazy",{bind:i.add.bind(i),update:i.update.bind(i),componentUpdated:i.lazyLoadHandler.bind(i),unbind:i.remove.bind(i)}),t.directive("lazy-container",{bind:r.bind.bind(r),componentUpdated:r.update.bind(r),unbind:r.unbind.bind(r)})):(t.directive("lazy",{bind:i.lazyLoadHandler.bind(i),update(t,e){n(this.vm.$refs,this.vm.$els),i.add(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){i.remove(this.el)}}),t.directive("lazy-container",{update(t,e){r.update(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind(){r.unbind(this.el)}}))}};t.Lazy=$,t.LazyComponent=T,t.LazyContainer=O,t.LazyImage=H,t.default=Q,Object.defineProperty(t,"__esModule",{value:!0})}));