diff --git a/package.json b/package.json index e97446f..2a2c3a9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-lazyload", - "version": "1.3.4", + "version": "1.3.5", "description": "Vue module for lazy-loading images in your vue.js applications.", "main": "vue-lazyload.js", "module": "vue-lazyload.esm.js", diff --git a/vue-lazyload.esm.js b/vue-lazyload.esm.js index b661b19..7de5613 100644 --- a/vue-lazyload.esm.js +++ b/vue-lazyload.esm.js @@ -1,307 +1,197 @@ /*! - * Vue-Lazyload.js v1.3.4 - * (c) 2021 Awe + * Vue-Lazyload.js v1.3.5 + * (c) 2023 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.'); - } +function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; +} - if (typeof objects === 'undefined' || typeof Symbol === 'undefined') { - return receiver; - } - - if (typeof Object.getOwnPropertySymbols !== 'function') { - return receiver; - } +var assignSymbols$1 = createCommonjsModule(function (module) { + var toString = Object.prototype.toString; var isEnumerable = Object.prototype.propertyIsEnumerable; - var target = Object(receiver); - var len = arguments.length, - i = 0; + var getSymbols = Object.getOwnPropertySymbols; - while (++i < len) { - var provider = Object(arguments[i]); - var names = Object.getOwnPropertySymbols(provider); + module.exports = function (target) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } - for (var j = 0; j < names.length; j++) { - var key = names[j]; + if (!isObject(target)) { + throw new TypeError('expected the first argument to be an object'); + } - if (isEnumerable.call(provider, key)) { - target[key] = provider[key]; - } + if (args.length === 0 || typeof Symbol !== 'function' || typeof getSymbols !== 'function') { + return target; } - } - return target; -}; -var assignSymbols$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - 'default': assignSymbols, - __moduleExports: assignSymbols -}); + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; -var toString = Object.prototype.toString; + try { + for (var _iterator = args[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var arg = _step.value; -/** - * Get the native `typeof` a value. - * - * @param {*} `val` - * @return {*} Native javascript type - */ + var names = getSymbols(arg); -var kindOf = function kindOf(val) { - var type = typeof val; + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; - // 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'; - } + try { + for (var _iterator2 = names[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var key = _step2.value; - // functions - if (type === 'function' || val instanceof Function) { - if (typeof val.constructor.name !== 'undefined' && val.constructor.name.slice(0, 9) === 'Generator') { - return 'generatorfunction'; + if (isEnumerable.call(arg, key)) { + target[key] = arg[key]; + } + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } } - return 'function'; - } - // array - if (typeof Array.isArray !== 'undefined' && Array.isArray(val)) { - return 'array'; - } + return target; + }; - // check for instances of RegExp and Date before calling `toString` - if (val instanceof RegExp) { - return 'regexp'; - } - if (val instanceof Date) { - return 'date'; + function isObject(val) { + return typeof val === 'function' || toString.call(val) === '[object Object]' || Array.isArray(val); } +}); - // 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'; - } +var assignSymbols$2 = /*#__PURE__*/Object.freeze({ + __proto__: null, + 'default': assignSymbols$1, + __moduleExports: assignSymbols$1 +}); - // buffer - if (isBuffer(val)) { - return 'buffer'; - } +var assignSymbols = ( assignSymbols$2 && assignSymbols$1 ) || assignSymbols$2; - // 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'; - } +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { + return typeof obj; +} : function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; +}; - // 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'; - } - if (type === '[object Int32Array]') { - return 'int32array'; - } - if (type === '[object Uint32Array]') { - return 'uint32array'; - } - if (type === '[object Float32Array]') { - return 'float32array'; - } - if (type === '[object Float64Array]') { - return 'float64array'; +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); } - - // 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 createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } -var kindOf$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - 'default': kindOf, - __moduleExports: kindOf -}); + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); -var isPrimitive$2 = ( isPrimitive$1 && isPrimitive ) || isPrimitive$1; +var assignDeep = createCommonjsModule(function (module) { -var assignSymbols$2 = ( assignSymbols$1 && assignSymbols ) || assignSymbols$1; + var toString = Object.prototype.toString; -var typeOf = ( kindOf$1 && kindOf ) || kindOf$1; + var isValidKey = function isValidKey(key) { + return key !== '__proto__' && key !== 'constructor' && key !== 'prototype'; + }; -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); + var assign = module.exports = function (target) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; } - } - return target; -} - -/** - * Shallow extend - */ - -function extend(target, obj) { - assignSymbols$2(target, obj); - 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; + var i = 0; + if (isPrimitive(target)) target = args[i++]; + if (!target) target = {}; + for (; i < args.length; i++) { + if (isObject(args[i])) { + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = Object.keys(args[i])[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var key = _step.value; + + if (isValidKey(key)) { + if (isObject(target[key]) && isObject(args[i][key])) { + assign(target[key], args[i][key]); + } else { + target[key] = args[i][key]; + } + } + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } } - 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 === 'undefined' ? 'undefined' : _typeof(val)) === 'object' ? val === null : typeof val !== 'function'; + } +}); -const inBrowser = typeof window !== 'undefined' && window !== null; +var inBrowser = typeof window !== 'undefined' && window !== null; -const hasIntersectionObserver = checkIntersectionObserver(); +var hasIntersectionObserver = checkIntersectionObserver(); function checkIntersectionObserver() { if (inBrowser && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) { @@ -309,7 +199,7 @@ function checkIntersectionObserver() { // See: https://github.com/w3c/IntersectionObserver/issues/211 if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) { Object.defineProperty(window.IntersectionObserverEntry.prototype, 'isIntersecting', { - get: function () { + get: function get() { return this.intersectionRatio > 0; } }); @@ -319,12 +209,12 @@ function checkIntersectionObserver() { return false; } -const modeType = { +var modeType = { event: 'event', observer: 'observer' // CustomEvent polyfill for IE -};const CustomEvent = function () { +};var CustomEvent = function () { if (!inBrowser) return; // not IE if (typeof window.CustomEvent === 'function') return window.CustomEvent; @@ -340,13 +230,13 @@ const modeType = { function remove(arr, item) { if (!arr.length) return; - const index = arr.indexOf(item); + var index = arr.indexOf(item); if (index > -1) return arr.splice(index, 1); } function some(arr, fn) { - let has = false; - for (let i = 0, len = arr.length; i < len; i++) { + var has = false; + for (var i = 0, len = arr.length; i < len; i++) { if (fn(arr[i])) { has = true; break; @@ -358,18 +248,18 @@ function some(arr, fn) { function getBestSelectionFromSrcset(el, scale) { if (el.tagName !== 'IMG' || !el.getAttribute('data-srcset')) return; - let options = el.getAttribute('data-srcset'); - const result = []; - const container = el.parentNode; - const containerWidth = container.offsetWidth * scale; + var options = el.getAttribute('data-srcset'); + var result = []; + var container = el.parentNode; + var containerWidth = container.offsetWidth * scale; - let spaceIndex; - let tmpSrc; - let tmpWidth; + var spaceIndex = void 0; + var tmpSrc = void 0; + var tmpWidth = void 0; options = options.trim().split(','); - options.map(item => { + options.map(function (item) { item = item.trim(); spaceIndex = item.lastIndexOf(' '); if (spaceIndex === -1) { @@ -399,13 +289,13 @@ function getBestSelectionFromSrcset(el, scale) { } return 0; }); - let bestSelectedSrc = ''; - let tmpOption; + var bestSelectedSrc = ''; + var tmpOption = void 0; - for (let i = 0; i < result.length; i++) { + for (var i = 0; i < result.length; i++) { tmpOption = result[i]; bestSelectedSrc = tmpOption[1]; - const next = result[i + 1]; + var next = result[i + 1]; if (next && next[0] < containerWidth) { bestSelectedSrc = tmpOption[1]; break; @@ -419,8 +309,8 @@ function getBestSelectionFromSrcset(el, scale) { } function find(arr, fn) { - let item; - for (let i = 0, len = arr.length; i < len; i++) { + var item = void 0; + for (var i = 0, len = arr.length; i < len; i++) { if (fn(arr[i])) { item = arr[i]; break; @@ -429,15 +319,18 @@ function find(arr, fn) { return item; } -const getDPR = (scale = 1) => inBrowser ? window.devicePixelRatio || scale : scale; +var getDPR = function getDPR() { + var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; + return inBrowser ? window.devicePixelRatio || scale : scale; +}; function supportWebp() { if (!inBrowser) return false; - let support = true; + var support = true; try { - const elem = document.createElement('canvas'); + var elem = document.createElement('canvas'); if (elem.getContext && elem.getContext('2d')) { support = elem.toDataURL('image/webp').indexOf('data:image/webp') === 0; @@ -450,19 +343,19 @@ function supportWebp() { } function throttle(action, delay) { - let timeout = null; - let movement = null; - let lastRun = 0; - let needRun = false; + var timeout = null; + var movement = null; + var lastRun = 0; + var needRun = false; return function () { needRun = true; if (timeout) { return; } - let elapsed = Date.now() - lastRun; - let context = this; - let args = arguments; - let runCallback = function () { + var elapsed = Date.now() - lastRun; + var context = this; + var args = arguments; + var runCallback = function runCallback() { lastRun = Date.now(); timeout = false; action.apply(context, args); @@ -481,10 +374,10 @@ function throttle(action, delay) { function testSupportsPassive() { if (!inBrowser) return; - let support = false; + var support = false; try { - let opts = Object.defineProperty({}, 'passive', { - get: function () { + var opts = Object.defineProperty({}, 'passive', { + get: function get() { support = true; } }); @@ -493,10 +386,12 @@ function testSupportsPassive() { return support; } -const supportsPassive = testSupportsPassive(); +var supportsPassive = testSupportsPassive(); + +var _ = { + on: function on(el, type, func) { + var capture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; -const _ = { - on(el, type, func, capture = false) { if (supportsPassive) { el.addEventListener(type, func, { capture: capture, @@ -506,15 +401,17 @@ const _ = { el.addEventListener(type, func, capture); } }, - off(el, type, func, capture = false) { + off: function off(el, type, func) { + var capture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; + el.removeEventListener(type, func, capture); } }; -const loadImageAsync = (item, resolve, reject) => { - let image = new Image(); +var loadImageAsync = function loadImageAsync(item, resolve, reject) { + var image = new Image(); if (!item || !item.src) { - const err = new Error('image src is required'); + var err = new Error('image src is required'); return reject(err); } @@ -536,21 +433,21 @@ const loadImageAsync = (item, resolve, reject) => { }; }; -const style = (el, prop) => { +var style = function style(el, prop) { return typeof getComputedStyle !== 'undefined' ? getComputedStyle(el, null).getPropertyValue(prop) : el.style[prop]; }; -const overflow = el => { +var overflow = function overflow(el) { return style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x'); }; -const scrollParent = el => { +var scrollParent = function scrollParent(el) { if (!inBrowser) return; if (!(el instanceof HTMLElement)) { return window; } - let parent = el; + var parent = el; while (parent) { if (parent === document.body || parent === document.documentElement) { @@ -571,8 +468,8 @@ const scrollParent = el => { return window; }; -function isObject$1(obj) { - return obj !== null && typeof obj === 'object'; +function isObject(obj) { + return obj !== null && (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object'; } function ObjectKeys(obj) { @@ -580,8 +477,8 @@ function ObjectKeys(obj) { if (Object.keys) { return Object.keys(obj); } else { - let keys = []; - for (let key in obj) { + var keys = []; + for (var key in obj) { if (obj.hasOwnProperty(key)) { keys.push(key); } @@ -591,9 +488,9 @@ function ObjectKeys(obj) { } function ArrayFrom(arrLike) { - let len = arrLike.length; - const list = []; - for (let i = 0; i < len; i++) { + var len = arrLike.length; + var list = []; + for (var i = 0; i < len; i++) { list.push(arrLike[i]); } return list; @@ -601,30 +498,39 @@ function ArrayFrom(arrLike) { function noop() {} -class ImageCache { - constructor({ max }) { +var ImageCache = function () { + function ImageCache(_ref) { + var max = _ref.max; + classCallCheck(this, ImageCache); + this.options = { max: max || 100 }; this._caches = []; } - has(key) { - return this._caches.indexOf(key) > -1; - } - - add(key) { - if (this.has(key)) return; - this._caches.push(key); - if (this._caches.length > this.options.max) { - this.free(); + createClass(ImageCache, [{ + key: 'has', + value: function has(key) { + return this._caches.indexOf(key) > -1; } - } - - free() { - this._caches.shift(); - } -} + }, { + key: 'add', + value: function add(key) { + if (this.has(key)) return; + this._caches.push(key); + if (this._caches.length > this.options.max) { + this.free(); + } + } + }, { + key: 'free', + value: function free() { + this._caches.shift(); + } + }]); + return ImageCache; +}(); // el: { // state, @@ -633,8 +539,20 @@ class ImageCache { // loading // } -class ReactiveListener { - constructor({ el, src, error, loading, bindType, $parent, options, cors, elRenderer, imageCache }) { +var ReactiveListener = function () { + function ReactiveListener(_ref) { + var el = _ref.el, + src = _ref.src, + error = _ref.error, + loading = _ref.loading, + bindType = _ref.bindType, + $parent = _ref.$parent, + options = _ref.options, + cors = _ref.cors, + elRenderer = _ref.elRenderer, + imageCache = _ref.imageCache; + classCallCheck(this, ReactiveListener); + this.el = el; this.src = src; this.error = error; @@ -668,199 +586,265 @@ class ReactiveListener { * init listener state * @return */ - initState() { - if ('dataset' in this.el) { - this.el.dataset.src = this.src; - } else { - this.el.setAttribute('data-src', this.src); - } - this.state = { - loading: false, - error: false, - loaded: false, - rendered: false - }; - } - /* - * record performance - * @return - */ - record(event) { - this.performanceData[event] = Date.now(); - } + createClass(ReactiveListener, [{ + key: 'initState', + value: function initState() { + if ('dataset' in this.el) { + this.el.dataset.src = this.src; + } else { + this.el.setAttribute('data-src', this.src); + } - /* - * update image listener data - * @param {String} image uri - * @param {String} loading image uri - * @param {String} error image uri - * @return - */ - update({ src, loading, error }) { - const oldSrc = this.src; - this.src = src; - this.loading = loading; - this.error = error; - this.filter(); - if (oldSrc !== this.src) { - this.attempt = 0; - this.initState(); + this.state = { + loading: false, + error: false, + loaded: false, + rendered: false + }; } - } - /* - * get el node rect - * @return - */ - getRect() { - this.rect = this.el.getBoundingClientRect(); - } + /* + * record performance + * @return + */ - /* - * check el is in view - * @return {Boolean} el is in view - */ - checkInView() { - this.getRect(); - return this.rect.top < window.innerHeight * this.options.preLoad && this.rect.bottom > this.options.preLoadTop && this.rect.left < window.innerWidth * this.options.preLoad && this.rect.right > 0; - } + }, { + key: 'record', + value: function record(event) { + this.performanceData[event] = Date.now(); + } - /* - * listener filter - */ - filter() { - ObjectKeys(this.options.filter).map(key => { - this.options.filter[key](this, this.options); - }); - } + /* + * update image listener data + * @param {String} image uri + * @param {String} loading image uri + * @param {String} error image uri + * @return + */ - /* - * render loading first - * @params cb:Function - * @return - */ - renderLoading(cb) { - this.state.loading = true; - loadImageAsync({ - src: this.loading, - cors: this.cors - }, data => { - this.render('loading', false); - this.state.loading = false; - cb(); - }, () => { - // handler `loading image` load failed - cb(); - this.state.loading = false; - if (!this.options.silent) console.warn(`VueLazyload log: load failed with loading image(${this.loading})`); - }); - } + }, { + key: 'update', + value: function update(_ref2) { + var src = _ref2.src, + loading = _ref2.loading, + error = _ref2.error; + + var oldSrc = this.src; + this.src = src; + this.loading = loading; + this.error = error; + this.filter(); + if (oldSrc !== this.src) { + this.attempt = 0; + this.initState(); + } + } - /* - * try load image and render it - * @return - */ - load(onFinish = noop) { - if (this.attempt > this.options.attempt - 1 && this.state.error) { - if (!this.options.silent) console.log(`VueLazyload log: ${this.src} tried too more than ${this.options.attempt} times`); - onFinish(); - return; + /* + * get el node rect + * @return + */ + + }, { + key: 'getRect', + value: function getRect() { + this.rect = this.el.getBoundingClientRect(); + } + + /* + * check el is in view + * @return {Boolean} el is in view + */ + + }, { + key: 'checkInView', + value: function checkInView() { + this.getRect(); + return this.rect.top < window.innerHeight * this.options.preLoad && this.rect.bottom > this.options.preLoadTop && this.rect.left < window.innerWidth * this.options.preLoad && this.rect.right > 0; } - if (this.state.rendered && this.state.loaded) return; - if (this._imageCache.has(this.src)) { - this.state.loaded = true; - this.render('loaded', true); - this.state.rendered = true; - return onFinish(); + + /* + * listener filter + */ + + }, { + key: 'filter', + value: function filter() { + var _this = this; + + ObjectKeys(this.options.filter).map(function (key) { + _this.options.filter[key](_this, _this.options); + }); } - this.renderLoading(() => { - this.attempt++; + /* + * render loading first + * @params cb:Function + * @return + */ - this.options.adapter['beforeLoad'] && this.options.adapter['beforeLoad'](this, this.options); - this.record('loadStart'); + }, { + key: 'renderLoading', + value: function renderLoading(cb) { + var _this2 = this; + this.state.loading = true; loadImageAsync({ - src: this.src, + src: this.loading, cors: this.cors - }, data => { - this.naturalHeight = data.naturalHeight; - this.naturalWidth = data.naturalWidth; + }, function (data) { + _this2.render('loading', false); + _this2.state.loading = false; + cb(); + }, function () { + // handler `loading image` load failed + cb(); + _this2.state.loading = false; + if (!_this2.options.silent) console.warn('VueLazyload log: load failed with loading image(' + _this2.loading + ')'); + }); + } + + /* + * try load image and render it + * @return + */ + + }, { + key: 'load', + value: function load() { + var _this3 = this; + + var onFinish = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop; + + if (this.attempt > this.options.attempt - 1 && this.state.error) { + if (!this.options.silent) console.log('VueLazyload log: ' + this.src + ' tried too more than ' + this.options.attempt + ' times'); + onFinish(); + return; + } + if (this.state.rendered && this.state.loaded) return; + if (this._imageCache.has(this.src)) { this.state.loaded = true; - this.state.error = false; - this.record('loadEnd'); - this.render('loaded', false); + this.render('loaded', true); this.state.rendered = true; - this._imageCache.add(this.src); - onFinish(); - }, err => { - !this.options.silent && console.error(err); - this.state.error = true; - this.state.loaded = false; - this.render('error', false); - }); - }); - } + return onFinish(); + } - /* - * render image - * @param {String} state to render // ['loading', 'src', 'error'] - * @param {String} is form cache - * @return - */ - render(state, cache) { - this.elRenderer(this, state, cache); - } + this.renderLoading(function () { + _this3.attempt++; + + _this3.options.adapter['beforeLoad'] && _this3.options.adapter['beforeLoad'](_this3, _this3.options); + _this3.record('loadStart'); + + loadImageAsync({ + src: _this3.src, + cors: _this3.cors + }, function (data) { + _this3.naturalHeight = data.naturalHeight; + _this3.naturalWidth = data.naturalWidth; + _this3.state.loaded = true; + _this3.state.error = false; + _this3.record('loadEnd'); + _this3.render('loaded', false); + _this3.state.rendered = true; + _this3._imageCache.add(_this3.src); + onFinish(); + }, function (err) { + !_this3.options.silent && console.error(err); + _this3.state.error = true; + _this3.state.loaded = false; + _this3.render('error', false); + }); + }); + } - /* - * output performance data - * @return {Object} performance data - */ - performance() { - let state = 'loading'; - let time = 0; + /* + * render image + * @param {String} state to render // ['loading', 'src', 'error'] + * @param {String} is form cache + * @return + */ - if (this.state.loaded) { - state = 'loaded'; - time = (this.performanceData.loadEnd - this.performanceData.loadStart) / 1000; + }, { + key: 'render', + value: function render(state, cache) { + this.elRenderer(this, state, cache); } - if (this.state.error) state = 'error'; + /* + * output performance data + * @return {Object} performance data + */ - return { - src: this.src, - state, - time - }; - } + }, { + key: 'performance', + value: function performance() { + var state = 'loading'; + var time = 0; - /* - * $destroy - * @return - */ - $destroy() { - this.el = null; - this.src = null; - this.error = null; - this.loading = null; - this.bindType = null; - this.attempt = 0; - } -} + if (this.state.loaded) { + state = 'loaded'; + time = (this.performanceData.loadEnd - this.performanceData.loadStart) / 1000; + } + + if (this.state.error) state = 'error'; + + return { + src: this.src, + state: state, + time: time + }; + } + + /* + * $destroy + * @return + */ -const DEFAULT_URL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; -const DEFAULT_EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']; -const DEFAULT_OBSERVER_OPTIONS = { + }, { + key: '$destroy', + value: function $destroy() { + this.el = null; + this.src = null; + this.error = null; + this.loading = null; + this.bindType = null; + this.attempt = 0; + } + }]); + return ReactiveListener; +}(); + +var DEFAULT_URL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; +var DEFAULT_EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']; +var DEFAULT_OBSERVER_OPTIONS = { rootMargin: '0px', threshold: 0 }; function Lazy(Vue) { - return class Lazy { - constructor({ preLoad, error, throttleWait, preLoadTop, dispatchEvent, loading, attempt, silent = true, scale, listenEvents, hasbind, filter, adapter, observer, observerOptions }) { - this.version = '"1.3.4"'; + return function () { + function Lazy(_ref) { + var preLoad = _ref.preLoad, + error = _ref.error, + throttleWait = _ref.throttleWait, + preLoadTop = _ref.preLoadTop, + dispatchEvent = _ref.dispatchEvent, + loading = _ref.loading, + attempt = _ref.attempt, + _ref$silent = _ref.silent, + silent = _ref$silent === undefined ? true : _ref$silent, + scale = _ref.scale, + listenEvents = _ref.listenEvents; + _ref.hasbind; + var filter = _ref.filter, + adapter = _ref.adapter, + observer = _ref.observer, + observerOptions = _ref.observerOptions; + classCallCheck(this, Lazy); + + this.version = '"1.3.5"'; this.mode = modeType.event; this.ListenerQueue = []; this.TargetIndex = 0; @@ -895,401 +879,499 @@ function Lazy(Vue) { * @param {Object} config params * @return */ - config(options = {}) { - assignDeep(this.options, options); - } - - /** - * output listener's load performance - * @return {Array} - */ - performance() { - let list = []; - this.ListenerQueue.map(item => { - list.push(item.performance()); - }); - return list; - } + createClass(Lazy, [{ + key: 'config', + value: function config() { + var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; - /* - * add lazy component to queue - * @param {Vue} vm lazy component instance - * @return - */ - addLazyBox(vm) { - this.ListenerQueue.push(vm); - if (inBrowser) { - this._addListenerTarget(window); - this._observer && this._observer.observe(vm.el); - if (vm.$el && vm.$el.parentNode) { - this._addListenerTarget(vm.$el.parentNode); - } + assignDeep(this.options, options); } - } - /* - * add image listener to queue - * @param {DOM} el - * @param {object} binding vue directive binding - * @param {vnode} vnode vue directive vnode - * @return - */ - add(el, binding, vnode) { - if (some(this.ListenerQueue, item => item.el === el)) { - this.update(el, binding); - return Vue.nextTick(this.lazyLoadHandler); - } + /** + * output listener's load performance + * @return {Array} + */ - let { src, loading, error, cors } = this._valueFormatter(binding.value); + }, { + key: 'performance', + value: function performance() { + var list = []; - Vue.nextTick(() => { - src = getBestSelectionFromSrcset(el, this.options.scale) || src; - this._observer && this._observer.observe(el); + this.ListenerQueue.map(function (item) { + list.push(item.performance()); + }); + + return list; + } - const container = Object.keys(binding.modifiers)[0]; - let $parent; + /* + * add lazy component to queue + * @param {Vue} vm lazy component instance + * @return + */ - if (container) { - $parent = vnode.context.$refs[container]; - // if there is container passed in, try ref first, then fallback to getElementById to support the original usage - $parent = $parent ? $parent.$el || $parent : document.getElementById(container); + }, { + key: 'addLazyBox', + value: function addLazyBox(vm) { + this.ListenerQueue.push(vm); + if (inBrowser) { + this._addListenerTarget(window); + this._observer && this._observer.observe(vm.el); + if (vm.$el && vm.$el.parentNode) { + this._addListenerTarget(vm.$el.parentNode); + } } + } - if (!$parent) { - $parent = scrollParent(el); + /* + * add image listener to queue + * @param {DOM} el + * @param {object} binding vue directive binding + * @param {vnode} vnode vue directive vnode + * @return + */ + + }, { + key: 'add', + value: function add(el, binding, vnode) { + var _this = this; + + if (some(this.ListenerQueue, function (item) { + return item.el === el; + })) { + this.update(el, binding); + return Vue.nextTick(this.lazyLoadHandler); } - const newListener = new ReactiveListener({ - bindType: binding.arg, - $parent, - el, - loading, - error, - src, - cors, - elRenderer: this._elRenderer.bind(this), - options: this.options, - imageCache: this._imageCache + var _valueFormatter2 = this._valueFormatter(binding.value), + src = _valueFormatter2.src, + loading = _valueFormatter2.loading, + error = _valueFormatter2.error, + cors = _valueFormatter2.cors; + + Vue.nextTick(function () { + src = getBestSelectionFromSrcset(el, _this.options.scale) || src; + _this._observer && _this._observer.observe(el); + + var container = Object.keys(binding.modifiers)[0]; + var $parent = void 0; + + if (container) { + $parent = vnode.context.$refs[container]; + // if there is container passed in, try ref first, then fallback to getElementById to support the original usage + $parent = $parent ? $parent.$el || $parent : document.getElementById(container); + } + + if (!$parent) { + $parent = scrollParent(el); + } + + var newListener = new ReactiveListener({ + bindType: binding.arg, + $parent: $parent, + el: el, + loading: loading, + error: error, + src: src, + cors: cors, + elRenderer: _this._elRenderer.bind(_this), + options: _this.options, + imageCache: _this._imageCache + }); + + _this.ListenerQueue.push(newListener); + + if (inBrowser) { + _this._addListenerTarget(window); + _this._addListenerTarget($parent); + } + + _this.lazyLoadHandler(); + Vue.nextTick(function () { + return _this.lazyLoadHandler(); + }); }); + } - this.ListenerQueue.push(newListener); + /** + * update image src + * @param {DOM} el + * @param {object} vue directive binding + * @return + */ - if (inBrowser) { - this._addListenerTarget(window); - this._addListenerTarget($parent); - } + }, { + key: 'update', + value: function update(el, binding, vnode) { + var _this2 = this; - this.lazyLoadHandler(); - Vue.nextTick(() => this.lazyLoadHandler()); - }); - } + var _valueFormatter3 = this._valueFormatter(binding.value), + src = _valueFormatter3.src, + loading = _valueFormatter3.loading, + error = _valueFormatter3.error; - /** - * update image src - * @param {DOM} el - * @param {object} vue directive binding - * @return - */ - update(el, binding, vnode) { - let { src, loading, error } = this._valueFormatter(binding.value); - src = getBestSelectionFromSrcset(el, this.options.scale) || src; - - const exist = find(this.ListenerQueue, item => item.el === el); - if (!exist) { - this.add(el, binding, vnode); - } else { - exist.update({ - src, - loading, - error + src = getBestSelectionFromSrcset(el, this.options.scale) || src; + + var exist = find(this.ListenerQueue, function (item) { + return item.el === el; + }); + if (!exist) { + this.add(el, binding, vnode); + } else { + exist.update({ + src: src, + loading: loading, + error: error + }); + } + if (this._observer) { + this._observer.unobserve(el); + this._observer.observe(el); + } + this.lazyLoadHandler(); + Vue.nextTick(function () { + return _this2.lazyLoadHandler(); }); } - if (this._observer) { - this._observer.unobserve(el); - this._observer.observe(el); + + /** + * remove listener form list + * @param {DOM} el + * @return + */ + + }, { + key: 'remove', + value: function remove$1(el) { + if (!el) return; + this._observer && this._observer.unobserve(el); + var existItem = find(this.ListenerQueue, function (item) { + return item.el === el; + }); + if (existItem) { + this._removeListenerTarget(existItem.$parent); + this._removeListenerTarget(window); + remove(this.ListenerQueue, existItem); + existItem.$destroy(); + } } - this.lazyLoadHandler(); - Vue.nextTick(() => this.lazyLoadHandler()); - } - /** - * remove listener form list - * @param {DOM} el - * @return - */ - remove(el) { - if (!el) return; - this._observer && this._observer.unobserve(el); - const existItem = find(this.ListenerQueue, item => item.el === el); - if (existItem) { - this._removeListenerTarget(existItem.$parent); + /* + * remove lazy components form list + * @param {Vue} vm Vue instance + * @return + */ + + }, { + key: 'removeComponent', + value: function removeComponent(vm) { + if (!vm) return; + remove(this.ListenerQueue, vm); + this._observer && this._observer.unobserve(vm.el); + if (vm.$parent && vm.$el.parentNode) { + this._removeListenerTarget(vm.$el.parentNode); + } this._removeListenerTarget(window); - remove(this.ListenerQueue, existItem); - existItem.$destroy(); } - } + }, { + key: 'setMode', + value: function setMode(mode) { + var _this3 = this; - /* - * remove lazy components form list - * @param {Vue} vm Vue instance - * @return - */ - removeComponent(vm) { - if (!vm) return; - remove(this.ListenerQueue, vm); - this._observer && this._observer.unobserve(vm.el); - if (vm.$parent && vm.$el.parentNode) { - this._removeListenerTarget(vm.$el.parentNode); - } - this._removeListenerTarget(window); - } + if (!hasIntersectionObserver && mode === modeType.observer) { + mode = modeType.event; + } - setMode(mode) { - if (!hasIntersectionObserver && mode === modeType.observer) { - mode = modeType.event; - } + this.mode = mode; // event or observer - this.mode = mode; // event or observer + if (mode === modeType.event) { + if (this._observer) { + this.ListenerQueue.forEach(function (listener) { + _this3._observer.unobserve(listener.el); + }); + this._observer = null; + } - if (mode === modeType.event) { - if (this._observer) { - this.ListenerQueue.forEach(listener => { - this._observer.unobserve(listener.el); + this.TargetQueue.forEach(function (target) { + _this3._initListen(target.el, true); }); - this._observer = null; + } else { + this.TargetQueue.forEach(function (target) { + _this3._initListen(target.el, false); + }); + this._initIntersectionObserver(); } + } - this.TargetQueue.forEach(target => { - this._initListen(target.el, true); + /* + *** Private functions *** + */ + + /* + * add listener target + * @param {DOM} el listener target + * @return + */ + + }, { + key: '_addListenerTarget', + value: function _addListenerTarget(el) { + if (!el) return; + var target = find(this.TargetQueue, function (target) { + return target.el === el; }); - } else { - this.TargetQueue.forEach(target => { - this._initListen(target.el, false); + if (!target) { + target = { + el: el, + id: ++this.TargetIndex, + childrenCount: 1, + listened: true + }; + this.mode === modeType.event && this._initListen(target.el, true); + this.TargetQueue.push(target); + } else { + target.childrenCount++; + } + return this.TargetIndex; + } + + /* + * remove listener target or reduce target childrenCount + * @param {DOM} el or window + * @return + */ + + }, { + key: '_removeListenerTarget', + value: function _removeListenerTarget(el) { + var _this4 = this; + + this.TargetQueue.forEach(function (target, index) { + if (target.el === el) { + target.childrenCount--; + if (!target.childrenCount) { + _this4._initListen(target.el, false); + _this4.TargetQueue.splice(index, 1); + target = null; + } + } }); - this._initIntersectionObserver(); } - } - /* - *** Private functions *** - */ + /* + * add or remove eventlistener + * @param {DOM} el DOM or Window + * @param {boolean} start flag + * @return + */ - /* - * add listener target - * @param {DOM} el listener target - * @return - */ - _addListenerTarget(el) { - if (!el) return; - let target = find(this.TargetQueue, target => target.el === el); - if (!target) { - target = { - el: el, - id: ++this.TargetIndex, - childrenCount: 1, - listened: true - }; - this.mode === modeType.event && this._initListen(target.el, true); - this.TargetQueue.push(target); - } else { - target.childrenCount++; - } - return this.TargetIndex; - } + }, { + key: '_initListen', + value: function _initListen(el, start) { + var _this5 = this; - /* - * remove listener target or reduce target childrenCount - * @param {DOM} el or window - * @return - */ - _removeListenerTarget(el) { - this.TargetQueue.forEach((target, index) => { - if (target.el === el) { - target.childrenCount--; - if (!target.childrenCount) { - this._initListen(target.el, false); - this.TargetQueue.splice(index, 1); - target = null; + this.options.ListenEvents.forEach(function (evt) { + return _[start ? 'on' : 'off'](el, evt, _this5.lazyLoadHandler); + }); + } + }, { + key: '_initEvent', + value: function _initEvent() { + var _this6 = this; + + this.Event = { + listeners: { + loading: [], + loaded: [], + error: [] } - } - }); - } + }; - /* - * add or remove eventlistener - * @param {DOM} el DOM or Window - * @param {boolean} start flag - * @return - */ - _initListen(el, start) { - this.options.ListenEvents.forEach(evt => _[start ? 'on' : 'off'](el, evt, this.lazyLoadHandler)); - } + this.$on = function (event, func) { + if (!_this6.Event.listeners[event]) _this6.Event.listeners[event] = []; + _this6.Event.listeners[event].push(func); + }; - _initEvent() { - this.Event = { - listeners: { - loading: [], - loaded: [], - error: [] - } - }; + this.$once = function (event, func) { + var vm = _this6; + function on() { + vm.$off(event, on); + func.apply(vm, arguments); + } + _this6.$on(event, on); + }; - this.$on = (event, func) => { - if (!this.Event.listeners[event]) this.Event.listeners[event] = []; - this.Event.listeners[event].push(func); - }; + this.$off = function (event, func) { + if (!func) { + if (!_this6.Event.listeners[event]) return; + _this6.Event.listeners[event].length = 0; + return; + } + remove(_this6.Event.listeners[event], func); + }; - this.$once = (event, func) => { - const vm = this; - function on() { - vm.$off(event, on); - func.apply(vm, arguments); - } - this.$on(event, on); - }; + this.$emit = function (event, context, inCache) { + if (!_this6.Event.listeners[event]) return; + _this6.Event.listeners[event].forEach(function (func) { + return func(context, inCache); + }); + }; + } - this.$off = (event, func) => { - if (!func) { - if (!this.Event.listeners[event]) return; - this.Event.listeners[event].length = 0; - return; - } - remove(this.Event.listeners[event], func); - }; + /** + * find nodes which in viewport and trigger load + * @return + */ - this.$emit = (event, context, inCache) => { - if (!this.Event.listeners[event]) return; - this.Event.listeners[event].forEach(func => func(context, inCache)); - }; - } + }, { + key: '_lazyLoadHandler', + value: function _lazyLoadHandler() { + var _this7 = this; - /** - * find nodes which in viewport and trigger load - * @return - */ - _lazyLoadHandler() { - const freeList = []; - this.ListenerQueue.forEach((listener, index) => { - if (!listener.el || !listener.el.parentNode) { - freeList.push(listener); - } - const catIn = listener.checkInView(); - if (!catIn) return; - listener.load(); - }); - freeList.forEach(item => { - remove(this.ListenerQueue, item); - item.$destroy(); - }); - } - /** - * init IntersectionObserver - * set mode to observer - * @return - */ - _initIntersectionObserver() { - if (!hasIntersectionObserver) return; - this._observer = new IntersectionObserver(this._observerHandler.bind(this), this.options.observerOptions); - if (this.ListenerQueue.length) { - this.ListenerQueue.forEach(listener => { - this._observer.observe(listener.el); + var freeList = []; + this.ListenerQueue.forEach(function (listener, index) { + if (!listener.el || !listener.el.parentNode) { + freeList.push(listener); + } + var catIn = listener.checkInView(); + if (!catIn) return; + listener.load(); + }); + freeList.forEach(function (item) { + remove(_this7.ListenerQueue, item); + item.$destroy(); }); } - } - - /** - * init IntersectionObserver - * @return - */ - _observerHandler(entries, observer) { - entries.forEach(entry => { - if (entry.isIntersecting) { - this.ListenerQueue.forEach(listener => { - if (listener.el === entry.target) { - if (listener.state.loaded) return this._observer.unobserve(listener.el); - listener.load(); - } + /** + * init IntersectionObserver + * set mode to observer + * @return + */ + + }, { + key: '_initIntersectionObserver', + value: function _initIntersectionObserver() { + var _this8 = this; + + if (!hasIntersectionObserver) return; + this._observer = new IntersectionObserver(this._observerHandler.bind(this), this.options.observerOptions); + if (this.ListenerQueue.length) { + this.ListenerQueue.forEach(function (listener) { + _this8._observer.observe(listener.el); }); } - }); - } - - /** - * set element attribute with image'url and state - * @param {object} lazyload listener object - * @param {string} state will be rendered - * @param {bool} inCache is rendered from cache - * @return - */ - _elRenderer(listener, state, cache) { - if (!listener.el) return; - const { el, bindType } = listener; - - let src; - switch (state) { - case 'loading': - src = listener.loading; - break; - case 'error': - src = listener.error; - break; - default: - src = listener.src; - break; } - if (bindType) { - el.style[bindType] = 'url("' + src + '")'; - } else if (el.getAttribute('src') !== src) { - el.setAttribute('src', src); + /** + * init IntersectionObserver + * @return + */ + + }, { + key: '_observerHandler', + value: function _observerHandler(entries, observer) { + var _this9 = this; + + entries.forEach(function (entry) { + if (entry.isIntersecting) { + _this9.ListenerQueue.forEach(function (listener) { + if (listener.el === entry.target) { + if (listener.state.loaded) return _this9._observer.unobserve(listener.el); + listener.load(); + } + }); + } + }); } - el.setAttribute('lazy', state); + /** + * set element attribute with image'url and state + * @param {object} lazyload listener object + * @param {string} state will be rendered + * @param {bool} inCache is rendered from cache + * @return + */ + + }, { + key: '_elRenderer', + value: function _elRenderer(listener, state, cache) { + if (!listener.el) return; + var el = listener.el, + bindType = listener.bindType; + + + var src = void 0; + switch (state) { + case 'loading': + src = listener.loading; + break; + case 'error': + src = listener.error; + break; + default: + src = listener.src; + break; + } - this.$emit(state, listener, cache); - this.options.adapter[state] && this.options.adapter[state](listener, this.options); + if (bindType) { + el.style[bindType] = 'url("' + src + '")'; + } else if (el.getAttribute('src') !== src) { + el.setAttribute('src', src); + } - if (this.options.dispatchEvent) { - const event = new CustomEvent(state, { - detail: listener - }); - el.dispatchEvent(event); + el.setAttribute('lazy', state); + + this.$emit(state, listener, cache); + this.options.adapter[state] && this.options.adapter[state](listener, this.options); + + if (this.options.dispatchEvent) { + var event = new CustomEvent(state, { + detail: listener + }); + el.dispatchEvent(event); + } } - } - /** - * generate loading loaded error image url - * @param {string} image's src - * @return {object} image's loading, loaded, error url - */ - _valueFormatter(value) { - let src = value; - let loading = this.options.loading; - let error = this.options.error; - - // value is object - if (isObject$1(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; - error = value.error || this.options.error; + /** + * generate loading loaded error image url + * @param {string} image's src + * @return {object} image's loading, loaded, error url + */ + + }, { + key: '_valueFormatter', + value: function _valueFormatter(value) { + var src = value; + var loading = this.options.loading; + var error = this.options.error; + + // value is object + 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; + error = value.error || this.options.error; + } + return { + src: src, + loading: loading, + error: error + }; } - return { - src, - loading, - error - }; - } - }; + }]); + return Lazy; + }(); } -Lazy.install = (Vue, options = {}) => { - const LazyClass = Lazy(Vue); - const lazy = new LazyClass(options); +Lazy.install = function (Vue) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + var LazyClass = Lazy(Vue); + var lazy = new LazyClass(options); - const isVue2 = Vue.version.split('.')[0] === '2'; + var isVue2 = Vue.version.split('.')[0] === '2'; if (isVue2) { Vue.directive('lazy', { bind: lazy.add.bind(lazy), @@ -1300,7 +1382,7 @@ Lazy.install = (Vue, options = {}) => { } else { Vue.directive('lazy', { bind: lazy.lazyLoadHandler.bind(lazy), - update(newValue, oldValue) { + update: function update(newValue, oldValue) { assignDeep(this.vm.$refs, this.vm.$els); lazy.add(this.el, { modifiers: this.modifiers || {}, @@ -1311,14 +1393,14 @@ Lazy.install = (Vue, options = {}) => { context: this.vm }); }, - unbind() { + unbind: function unbind() { lazy.remove(this.el); } }); } }; -const LazyComponent = lazy => { +var LazyComponent = function LazyComponent(lazy) { return { props: { tag: { @@ -1326,10 +1408,10 @@ const LazyComponent = lazy => { default: 'div' } }, - render(h) { + render: function render(h) { return h(this.tag, null, this.show ? this.$slots.default : null); }, - data() { + data: function data() { return { el: null, state: { @@ -1339,72 +1421,95 @@ const LazyComponent = lazy => { show: false }; }, - mounted() { + mounted: function mounted() { this.el = this.$el; lazy.addLazyBox(this); lazy.lazyLoadHandler(); }, - beforeDestroy() { + beforeDestroy: function beforeDestroy() { lazy.removeComponent(this); }, + methods: { - getRect() { + getRect: function getRect() { this.rect = this.$el.getBoundingClientRect(); }, - checkInView() { + checkInView: function checkInView() { this.getRect(); return inBrowser && this.rect.top < window.innerHeight * lazy.options.preLoad && this.rect.bottom > 0 && this.rect.left < window.innerWidth * lazy.options.preLoad && this.rect.right > 0; }, - load() { + load: function load() { this.show = true; this.state.loaded = true; this.$emit('show', this); }, - destroy() { + destroy: function destroy() { return this.$destroy; } } }; }; -LazyComponent.install = function (Vue, options = {}) { - const LazyClass = Lazy(Vue); - const lazy = new LazyClass(options); +LazyComponent.install = function (Vue) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + var LazyClass = Lazy(Vue); + var lazy = new LazyClass(options); Vue.component('lazy-component', LazyComponent(lazy)); }; -class LazyContainerMananger { - constructor({ lazy }) { +var LazyContainerMananger = function () { + function LazyContainerMananger(_ref) { + var lazy = _ref.lazy; + classCallCheck(this, LazyContainerMananger); + this.lazy = lazy; lazy.lazyContainerMananger = this; this._queue = []; } - bind(el, binding, vnode) { - const container = new LazyContainer({ el, binding, vnode, lazy: this.lazy }); - this._queue.push(container); - } - - update(el, binding, vnode) { - const container = find(this._queue, item => item.el === el); - if (!container) return; - container.update({ el, binding, vnode }); - } + createClass(LazyContainerMananger, [{ + key: 'bind', + value: function bind(el, binding, vnode) { + var container = new LazyContainer({ el: el, binding: binding, vnode: vnode, lazy: this.lazy }); + this._queue.push(container); + } + }, { + key: 'update', + value: function update(el, binding, vnode) { + var container = find(this._queue, function (item) { + return item.el === el; + }); + if (!container) return; + container.update({ el: el, binding: binding, vnode: vnode }); + } + }, { + key: 'unbind', + value: function unbind(el, binding, vnode) { + var container = find(this._queue, function (item) { + return item.el === el; + }); + if (!container) return; + container.clear(); + remove(this._queue, container); + } + }]); + return LazyContainerMananger; +}(); - unbind(el, binding, vnode) { - const container = find(this._queue, item => item.el === el); - if (!container) return; - container.clear(); - remove(this._queue, container); - } -} -const defaultOptions = { +var defaultOptions = { selector: 'img' }; -class LazyContainer { - constructor({ el, binding, vnode, lazy }) { +var LazyContainer = function () { + function LazyContainer(_ref2) { + var el = _ref2.el, + binding = _ref2.binding, + vnode = _ref2.vnode, + lazy = _ref2.lazy; + classCallCheck(this, LazyContainer); + this.el = null; this.vnode = vnode; this.binding = binding; @@ -1412,45 +1517,62 @@ class LazyContainer { this.lazy = lazy; this._queue = []; - this.update({ el, binding }); + this.update({ el: el, binding: binding }); } - update({ el, binding }) { - this.el = el; - this.options = assignDeep({}, defaultOptions, binding.value); - - const imgs = this.getImgs(); - imgs.forEach(el => { - this.lazy.add(el, assignDeep({}, this.binding, { - value: { - src: 'dataset' in el ? el.dataset.src : el.getAttribute('data-src'), - error: ('dataset' in el ? el.dataset.error : el.getAttribute('data-error')) || this.options.error, - loading: ('dataset' in el ? el.dataset.loading : el.getAttribute('data-loading')) || this.options.loading - } - }), this.vnode); - }); - } + createClass(LazyContainer, [{ + key: 'update', + value: function update(_ref3) { + var _this = this; - getImgs() { - return ArrayFrom(this.el.querySelectorAll(this.options.selector)); - } + var el = _ref3.el, + binding = _ref3.binding; - clear() { - const imgs = this.getImgs(); - imgs.forEach(el => this.lazy.remove(el)); + this.el = el; + this.options = assignDeep({}, defaultOptions, binding.value); - this.vnode = null; - this.binding = null; - this.lazy = null; - } -} + var imgs = this.getImgs(); + imgs.forEach(function (el) { + _this.lazy.add(el, assignDeep({}, _this.binding, { + value: { + src: 'dataset' in el ? el.dataset.src : el.getAttribute('data-src'), + error: ('dataset' in el ? el.dataset.error : el.getAttribute('data-error')) || _this.options.error, + loading: ('dataset' in el ? el.dataset.loading : el.getAttribute('data-loading')) || _this.options.loading + } + }), _this.vnode); + }); + } + }, { + key: 'getImgs', + value: function getImgs() { + return ArrayFrom(this.el.querySelectorAll(this.options.selector)); + } + }, { + key: 'clear', + value: function clear() { + var _this2 = this; + + var imgs = this.getImgs(); + imgs.forEach(function (el) { + return _this2.lazy.remove(el); + }); + + this.vnode = null; + this.binding = null; + this.lazy = null; + } + }]); + return LazyContainer; +}(); + +LazyContainer.install = function (Vue) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; -LazyContainer.install = (Vue, options = {}) => { - const LazyClass = Lazy(Vue); - const lazy = new LazyClass(options); - const lazyContainer = new LazyContainer({ lazy }); + var LazyClass = Lazy(Vue); + var lazy = new LazyClass(options); + var lazyContainer = new LazyContainer({ lazy: lazy }); - const isVue2 = Vue.version.split('.')[0] === '2'; + var isVue2 = Vue.version.split('.')[0] === '2'; if (isVue2) { Vue.directive('lazy-container', { bind: lazyContainer.bind.bind(lazyContainer), @@ -1459,7 +1581,7 @@ LazyContainer.install = (Vue, options = {}) => { }); } else { Vue.directive('lazy-container', { - update(newValue, oldValue) { + update: function update(newValue, oldValue) { lazyContainer.update(this.el, { modifiers: this.modifiers || {}, arg: this.arg, @@ -1469,14 +1591,14 @@ LazyContainer.install = (Vue, options = {}) => { context: this.vm }); }, - unbind() { + unbind: function unbind() { lazyContainer.unbind(this.el); } }); } }; -const LazyImage = lazyManager => { +var LazyImage = function LazyImage(lazyManager) { return { props: { src: [String, Object], @@ -1485,14 +1607,14 @@ const LazyImage = lazyManager => { default: 'img' } }, - render(h) { + render: function render(h) { return h(this.tag, { attrs: { src: this.renderSrc } }, this.$slots.default); }, - data() { + data: function data() { return { el: null, options: { @@ -1510,64 +1632,78 @@ const LazyImage = lazyManager => { renderSrc: '' }; }, + watch: { - src() { + src: function src() { this.init(); lazyManager.addLazyBox(this); lazyManager.lazyLoadHandler(); } }, - created() { + created: function created() { this.init(); this.renderSrc = this.options.loading; }, - mounted() { + mounted: function mounted() { this.el = this.$el; lazyManager.addLazyBox(this); lazyManager.lazyLoadHandler(); }, - beforeDestroy() { + beforeDestroy: function beforeDestroy() { lazyManager.removeComponent(this); }, + methods: { - init() { - const { src, loading, error } = lazyManager._valueFormatter(this.src); + init: function init() { + var _lazyManager$_valueFo = lazyManager._valueFormatter(this.src), + src = _lazyManager$_valueFo.src, + loading = _lazyManager$_valueFo.loading, + error = _lazyManager$_valueFo.error; + this.state.loaded = false; this.options.src = src; this.options.error = error; this.options.loading = loading; this.renderSrc = this.options.loading; }, - getRect() { + getRect: function getRect() { this.rect = this.$el.getBoundingClientRect(); }, - checkInView() { + checkInView: function checkInView() { this.getRect(); return inBrowser && this.rect.top < window.innerHeight * lazyManager.options.preLoad && this.rect.bottom > 0 && this.rect.left < window.innerWidth * lazyManager.options.preLoad && this.rect.right > 0; }, - load(onFinish = noop) { + load: function load() { + var _this = this; + + var onFinish = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop; + if (this.state.attempt > this.options.attempt - 1 && this.state.error) { - if (!lazyManager.options.silent) console.log(`VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`); + if (!lazyManager.options.silent) console.log('VueLazyload log: ' + this.options.src + ' tried too more than ' + this.options.attempt + ' times'); onFinish(); return; } - const src = this.options.src; - loadImageAsync({ src }, ({ src }) => { - this.renderSrc = src; - this.state.loaded = true; - }, e => { - this.state.attempt++; - this.renderSrc = this.options.error; - this.state.error = true; + var src = this.options.src; + loadImageAsync({ src: src }, function (_ref) { + var src = _ref.src; + + _this.renderSrc = src; + _this.state.loaded = true; + }, function (e) { + _this.state.attempt++; + _this.renderSrc = _this.options.error; + _this.state.error = true; }); } } }; }; -LazyImage.install = (Vue, options = {}) => { - const LazyClass = Lazy(Vue); - const lazy = new LazyClass(options); +LazyImage.install = function (Vue) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + var LazyClass = Lazy(Vue); + var lazy = new LazyClass(options); Vue.component('lazy-image', LazyImage(lazy)); }; @@ -1577,12 +1713,14 @@ var index = { * @param {Vue} Vue * @param {object} options lazyload options */ - install(Vue, options = {}) { - const LazyClass = Lazy(Vue); - const lazy = new LazyClass(options); - const lazyContainer = new LazyContainerMananger({ lazy }); + install: function install(Vue) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + var LazyClass = Lazy(Vue); + var lazy = new LazyClass(options); + var lazyContainer = new LazyContainerMananger({ lazy: lazy }); - const isVue2 = Vue.version.split('.')[0] === '2'; + var isVue2 = Vue.version.split('.')[0] === '2'; Vue.prototype.$Lazyload = lazy; @@ -1609,7 +1747,7 @@ var index = { } else { Vue.directive('lazy', { bind: lazy.lazyLoadHandler.bind(lazy), - update(newValue, oldValue) { + update: function update(newValue, oldValue) { assignDeep(this.vm.$refs, this.vm.$els); lazy.add(this.el, { modifiers: this.modifiers || {}, @@ -1620,13 +1758,13 @@ var index = { context: this.vm }); }, - unbind() { + unbind: function unbind() { lazy.remove(this.el); } }); Vue.directive('lazy-container', { - update(newValue, oldValue) { + update: function update(newValue, oldValue) { lazyContainer.update(this.el, { modifiers: this.modifiers || {}, arg: this.arg, @@ -1636,7 +1774,7 @@ var index = { context: this.vm }); }, - unbind() { + unbind: function unbind() { lazyContainer.unbind(this.el); } }); @@ -1644,5 +1782,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..af9aa3e 100644 --- a/vue-lazyload.js +++ b/vue-lazyload.js @@ -1,12 +1,6 @@ /*! - * Vue-Lazyload.js v1.3.4 - * (c) 2021 Awe + * Vue-Lazyload.js v1.3.5 + * (c) 2023 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 n=e((function(t){var e=Object.prototype.toString,n=Object.prototype.propertyIsEnumerable,i=Object.getOwnPropertySymbols;t.exports=function(t){for(var r=arguments.length,o=Array(r>1?r-1:0),s=1;s1?e-1:0),u=1;u0}}),!0;return!1}();var c="event",h="observer",f=function(){if(l)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 n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}}();function v(t,e){if(t.length){var n=t.indexOf(e);return n>-1?t.splice(n,1):void 0}}function p(t,e){if("IMG"===t.tagName&&t.getAttribute("data-srcset")){var n=t.getAttribute("data-srcset"),i=[],r=t.parentNode.offsetWidth*e,o=void 0,s=void 0,a=void 0;(n=n.trim().split(",")).map((function(t){t=t.trim(),-1===(o=t.lastIndexOf(" "))?(s=t,a=999998):(s=t.substr(0,o),a=parseInt(t.substr(o+1,t.length-o-2),10)),i.push([a,s])})),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}));for(var u="",l=void 0,d=0;d0&&void 0!==arguments[0]?arguments[0]:1;return l&&window.devicePixelRatio||t};function b(){if(!l)return!1;var t=!0;try{var 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}var m=function(){if(l){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e)}catch(t){}return t}}(),w={on:function(t,e,n){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];m?t.addEventListener(e,n,{capture:i,passive:!0}):t.addEventListener(e,n,i)},off:function(t,e,n){var i=arguments.length>3&&void 0!==arguments[3]&&arguments[3];t.removeEventListener(e,n,i)}},L=function(t,e,n){var i=new Image;if(!t||!t.src){var r=new Error("image src is required");return n(r)}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){n(t)}},_=function(t,e){return"undefined"!=typeof getComputedStyle?getComputedStyle(t,null).getPropertyValue(e):t.style[e]},z=function(t){return _(t,"overflow")+_(t,"overflow-y")+_(t,"overflow-x")};function E(){}var k=function(){function t(e){var n=e.max;s(this,t),this.options={max:n||100},this._caches=[]}return a(t,[{key:"has",value:function(t){return this._caches.indexOf(t)>-1}},{key:"add",value:function(t){this.has(t)||(this._caches.push(t),this._caches.length>this.options.max&&this.free())}},{key:"free",value:function(){this._caches.shift()}}]),t}(),x=function(){function t(e){var n=e.el,i=e.src,r=e.error,o=e.loading,a=e.bindType,u=e.$parent,l=e.options,d=e.cors,c=e.elRenderer,h=e.imageCache;s(this,t),this.el=n,this.src=i,this.error=r,this.loading=o,this.bindType=a,this.attempt=0,this.cors=d,this.naturalHeight=0,this.naturalWidth=0,this.options=l,this.rect=null,this.$parent=u,this.elRenderer=c,this._imageCache=h,this.performanceData={init:Date.now(),loadStart:0,loadEnd:0},this.filter(),this.initState(),this.render("loading",!1)}return a(t,[{key:"initState",value:function(){"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}}},{key:"record",value:function(t){this.performanceData[t]=Date.now()}},{key:"update",value:function(t){var e=t.src,n=t.loading,i=t.error,r=this.src;this.src=e,this.loading=n,this.error=i,this.filter(),r!==this.src&&(this.attempt=0,this.initState())}},{key:"getRect",value:function(){this.rect=this.el.getBoundingClientRect()}},{key:"checkInView",value:function(){return this.getRect(),this.rect.topthis.options.preLoadTop&&this.rect.left0}},{key:"filter",value:function(){var t=this;(function(t){if(!(t instanceof Object))return[];if(Object.keys)return Object.keys(t);var e=[];for(var n in t)t.hasOwnProperty(n)&&e.push(n);return e})(this.options.filter).map((function(e){t.options.filter[e](t,t.options)}))}},{key:"renderLoading",value:function(t){var e=this;this.state.loading=!0,L({src:this.loading,cors:this.cors},(function(n){e.render("loading",!1),e.state.loading=!1,t()}),(function(){t(),e.state.loading=!1,e.options.silent||console.warn("VueLazyload log: load failed with loading image("+e.loading+")")}))}},{key:"load",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:E;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 e()):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,e()):void this.renderLoading((function(){t.attempt++,t.options.adapter.beforeLoad&&t.options.adapter.beforeLoad(t,t.options),t.record("loadStart"),L({src:t.src,cors:t.cors},(function(n){t.naturalHeight=n.naturalHeight,t.naturalWidth=n.naturalWidth,t.state.loaded=!0,t.state.error=!1,t.record("loadEnd"),t.render("loaded",!1),t.state.rendered=!0,t._imageCache.add(t.src),e()}),(function(e){!t.options.silent&&console.error(e),t.state.error=!0,t.state.loaded=!1,t.render("error",!1)}))}))}},{key:"render",value:function(t,e){this.elRenderer(this,t,e)}},{key:"performance",value:function(){var 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}}},{key:"$destroy",value:function(){this.el=null,this.src=null,this.error=null,this.loading=null,this.bindType=null,this.attempt=0}}]),t}(),A="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",T=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove"],O={rootMargin:"0px",threshold:0};function $(t){return function(){function e(t){var n=t.preLoad,i=t.error,r=t.throttleWait,o=t.preLoadTop,a=t.dispatchEvent,u=t.loading,l=t.attempt,d=t.silent,f=void 0===d||d,v=t.scale,p=t.listenEvents;t.hasbind;var y,m,w,L,_,z,E=t.filter,x=t.adapter,$=t.observer,I=t.observerOptions;s(this,e),this.version='"1.3.5"',this.mode=c,this.ListenerQueue=[],this.TargetIndex=0,this.TargetQueue=[],this.options={silent:f,dispatchEvent:!!a,throttleWait:r||200,preLoad:n||1.3,preLoadTop:o||0,error:i||A,loading:u||A,attempt:l||3,scale:v||g(v),ListenEvents:p||T,hasbind:!1,supportWebp:b(),filter:E||{},adapter:x||{},observer:!!$,observerOptions:I||O},this._initEvent(),this._imageCache=new k({max:200}),this.lazyLoadHandler=(y=this._lazyLoadHandler.bind(this),m=this.options.throttleWait,w=null,L=null,_=0,z=!1,function(){if(z=!0,!w){var t=Date.now()-_,e=this,n=arguments,i=function(){_=Date.now(),w=!1,y.apply(e,n)};t>=m?i():w=setTimeout(i,m),z&&(clearTimeout(L),L=setTimeout(i,2*m))}}),this.setMode(this.options.observer?h:c)}return a(e,[{key:"config",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};u(this.options,t)}},{key:"performance",value:function(){var t=[];return this.ListenerQueue.map((function(e){t.push(e.performance())})),t}},{key:"addLazyBox",value:function(t){this.ListenerQueue.push(t),l&&(this._addListenerTarget(window),this._observer&&this._observer.observe(t.el),t.$el&&t.$el.parentNode&&this._addListenerTarget(t.$el.parentNode))}},{key:"add",value:function(e,n,i){var r=this;if(function(t,e){for(var n=!1,i=0,r=t.length;i1&&void 0!==arguments[1]?arguments[1]:{},n=new($(t))(e);"2"===t.version.split(".")[0]?t.directive("lazy",{bind:n.add.bind(n),update:n.update.bind(n),componentUpdated:n.lazyLoadHandler.bind(n),unbind:n.remove.bind(n)}):t.directive("lazy",{bind:n.lazyLoadHandler.bind(n),update:function(t,e){u(this.vm.$refs,this.vm.$els),n.add(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind:function(){n.remove(this.el)}})};var I=function(t){return{props:{tag:{type:String,default:"div"}},render:function(t){return t(this.tag,null,this.show?this.$slots.default:null)},data:function(){return{el:null,state:{loaded:!1},rect:{},show:!1}},mounted:function(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeDestroy:function(){t.removeComponent(this)},methods:{getRect:function(){this.rect=this.$el.getBoundingClientRect()},checkInView:function(){return this.getRect(),l&&this.rect.top0&&this.rect.left0},load:function(){this.show=!0,this.state.loaded=!0,this.$emit("show",this)},destroy:function(){return this.$destroy}}}};I.install=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=new($(t))(e);t.component("lazy-component",I(n))};var C=function(){function t(e){var n=e.lazy;s(this,t),this.lazy=n,n.lazyContainerMananger=this,this._queue=[]}return a(t,[{key:"bind",value:function(t,e,n){var i=new H({el:t,binding:e,vnode:n,lazy:this.lazy});this._queue.push(i)}},{key:"update",value:function(t,e,n){var i=y(this._queue,(function(e){return e.el===t}));i&&i.update({el:t,binding:e,vnode:n})}},{key:"unbind",value:function(t,e,n){var i=y(this._queue,(function(e){return e.el===t}));i&&(i.clear(),v(this._queue,i))}}]),t}(),S={selector:"img"},H=function(){function t(e){var n=e.el,i=e.binding,r=e.vnode,o=e.lazy;s(this,t),this.el=null,this.vnode=r,this.binding=i,this.options={},this.lazy=o,this._queue=[],this.update({el:n,binding:i})}return a(t,[{key:"update",value:function(t){var e=this,n=t.el,i=t.binding;this.el=n,this.options=u({},S,i.value),this.getImgs().forEach((function(t){e.lazy.add(t,u({},e.binding,{value:{src:"dataset"in t?t.dataset.src:t.getAttribute("data-src"),error:("dataset"in t?t.dataset.error:t.getAttribute("data-error"))||e.options.error,loading:("dataset"in t?t.dataset.loading:t.getAttribute("data-loading"))||e.options.loading}}),e.vnode)}))}},{key:"getImgs",value:function(){return function(t){for(var e=t.length,n=[],i=0;i1&&void 0!==arguments[1]?arguments[1]:{},n=new($(t))(e),i=new H({lazy:n});"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:function(t,e){i.update(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind:function(){i.unbind(this.el)}})};var j=function(t){return{props:{src:[String,Object],tag:{type:String,default:"img"}},render:function(t){return t(this.tag,{attrs:{src:this.renderSrc}},this.$slots.default)},data:function(){return{el:null,options:{src:"",error:"",loading:"",attempt:t.options.attempt},state:{loaded:!1,error:!1,attempt:0},rect:{},renderSrc:""}},watch:{src:function(){this.init(),t.addLazyBox(this),t.lazyLoadHandler()}},created:function(){this.init(),this.renderSrc=this.options.loading},mounted:function(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeDestroy:function(){t.removeComponent(this)},methods:{init:function(){var e=t._valueFormatter(this.src),n=e.src,i=e.loading,r=e.error;this.state.loaded=!1,this.options.src=n,this.options.error=r,this.options.loading=i,this.renderSrc=this.options.loading},getRect:function(){this.rect=this.$el.getBoundingClientRect()},checkInView:function(){return this.getRect(),l&&this.rect.top0&&this.rect.left0},load:function(){var e=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:E;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 n();var i=this.options.src;L({src:i},(function(t){var n=t.src;e.renderSrc=n,e.state.loaded=!0}),(function(t){e.state.attempt++,e.renderSrc=e.options.error,e.state.error=!0}))}}}};j.install=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=new($(t))(e);t.component("lazy-image",j(n))};var Q={install:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=new($(t))(e),i=new C({lazy:n}),r="2"===t.version.split(".")[0];t.prototype.$Lazyload=n,e.lazyComponent&&t.component("lazy-component",I(n)),e.lazyImage&&t.component("lazy-image",j(n)),r?(t.directive("lazy",{bind:n.add.bind(n),update:n.update.bind(n),componentUpdated:n.lazyLoadHandler.bind(n),unbind:n.remove.bind(n)}),t.directive("lazy-container",{bind:i.bind.bind(i),componentUpdated:i.update.bind(i),unbind:i.unbind.bind(i)})):(t.directive("lazy",{bind:n.lazyLoadHandler.bind(n),update:function(t,e){u(this.vm.$refs,this.vm.$els),n.add(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind:function(){n.remove(this.el)}}),t.directive("lazy-container",{update:function(t,e){i.update(this.el,{modifiers:this.modifiers||{},arg:this.arg,value:t,oldValue:e},{context:this.vm})},unbind:function(){i.unbind(this.el)}}))}};t.Lazy=$,t.LazyComponent=I,t.LazyContainer=C,t.LazyImage=j,t.default=Q,Object.defineProperty(t,"__esModule",{value:!0})}));