| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965 |
- /*!
- * Vue-Lazyload.js v1.3.3
- * (c) 2020 Awe <hilongjw@gmail.com>
- * Released under the MIT License.
- */
- ! function(t, e) {
- "object" == typeof exports && "undefined" != typeof module ? module.exports = e(require("axios")) : "function" == typeof define && define.amd ? define(["axios"], e) : t.VueLazyload = e(t.axios)
- }(this, function(t) {
- "use strict";
- function e(t) {
- return t.constructor && "function" == typeof t.constructor.isBuffer && t.constructor.isBuffer(t)
- }
- function n(t) {
- t = t || {};
- var e = arguments.length,
- n = 0;
- if(1 === e) return t;
- for(; ++n < e;) {
- var o = arguments[n];
- w(t) && (t = o), i(o) && r(t, o)
- }
- return t
- }
- function r(t, e) {
- L(t, e);
- for(var r in e)
- if(s(r) && o(e, r)) {
- var a = e[r];
- i(a) ? ("undefined" === E(t[r]) && "function" === E(a) && (t[r] = a), t[r] = n(t[r] || {}, a)) : t[r] = a
- }
- return t
- }
- function i(t) {
- return "object" === E(t) || "function" === E(t)
- }
- function o(t, e) {
- return Object.prototype.hasOwnProperty.call(t, e)
- }
- function s(t) {
- return "__proto__" !== t && "constructor" !== t && "prototype" !== t
- }
- function a(t, e) {
- if(t.length) {
- var n = t.indexOf(e);
- return n > -1 ? t.splice(n, 1) : void 0
- }
- }
- function u(t, e) {
- for(var n = !1, r = 0, i = t.length; r < i; r++)
- if(e(t[r])) {
- n = !0;
- break
- }
- return n
- }
- function d(t, e) {
- if("IMG" === t.tagName && t.getAttribute("data-srcset")) {
- var n = t.getAttribute("data-srcset"),
- r = [],
- i = t.parentNode,
- o = i.offsetWidth * e,
- s = void 0,
- a = void 0,
- u = void 0;
- n = n.trim().split(","), n.map(function(t) {
- t = t.trim(), s = t.lastIndexOf(" "), -1 === s ? (a = t, u = 999998) : (a = t.substr(0, s), u = parseInt(t.substr(s + 1, t.length - s - 2), 10)), r.push([u, a])
- }), r.sort(function(t, e) {
- if(t[0] < e[0]) return 1;
- 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 d = "", c = void 0, l = 0; l < r.length; l++) {
- c = r[l], d = c[1];
- var h = r[l + 1];
- if(h && h[0] < o) {
- d = c[1];
- break
- }
- if(!h) {
- d = c[1];
- break
- }
- }
- return d
- }
- }
- function c(t, e) {
- for(var n = void 0, r = 0, i = t.length; r < i; r++)
- if(e(t[r])) {
- n = t[r];
- break
- }
- return n
- }
- function l() {
- if(!A) return !1;
- var t = !0,
- e = document;
- try {
- var n = e.createElement("object");
- n.type = "image/webp", n.style.visibility = "hidden", n.innerHTML = "!", e.body.appendChild(n), t = !n.offsetWidth, e.body.removeChild(n)
- } catch(e) {
- t = !1
- }
- return t
- }
- function h(t, e) {
- var n = null,
- r = 0;
- return function() {
- if(!n) {
- var i = Date.now() - r,
- o = this,
- s = arguments,
- a = function() {
- r = Date.now(), n = !1, t.apply(o, s)
- };
- i >= e ? a() : n = setTimeout(a, e)
- }
- }
- }
- function f(t) {
- return null !== t && "object" === (void 0 === t ? "undefined" : b(t))
- }
- function v(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
- }
- function p(t) {
- for(var e = t.length, n = [], r = 0; r < e; r++) n.push(t[r]);
- return n
- }
- function y() {}
- t = t && t.hasOwnProperty("default") ? t.default : t;
- var b = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
- return typeof t
- } : function(t) {
- return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
- },
- g = function(t, e) {
- if(!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
- },
- m = function() {
- function t(t, e) {
- for(var n = 0; n < e.length; n++) {
- var r = e[n];
- r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r)
- }
- }
- return function(e, n, r) {
- return n && t(e.prototype, n), r && t(e, r), e
- }
- }(),
- w = function(t) {
- return null == t || "function" != typeof t && "object" !== (void 0 === t ? "undefined" : b(t))
- },
- L = function(t, e) {
- if(null === t || void 0 === 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 n = Object.prototype.propertyIsEnumerable, r = Object(t), i = arguments.length, o = 0; ++o < i;)
- for(var s = Object(arguments[o]), a = Object.getOwnPropertySymbols(s), u = 0; u < a.length; u++) {
- var d = a[u];
- n.call(s, d) && (r[d] = s[d])
- }
- return r
- },
- _ = Object.prototype.toString,
- E = function(t) {
- var n = void 0 === t ? "undefined" : b(t);
- return "undefined" === n ? "undefined" : null === t ? "null" : !0 === t || !1 === t || t instanceof Boolean ? "boolean" : "string" === n || t instanceof String ? "string" : "number" === n || t instanceof Number ? "number" : "function" === n || t instanceof Function ? void 0 !== t.constructor.name && "Generator" === t.constructor.name.slice(0, 9) ? "generatorfunction" : "function" : void 0 !== Array.isArray && Array.isArray(t) ? "array" : t instanceof RegExp ? "regexp" : t instanceof Date ? "date" : (n = _.call(t), "[object RegExp]" === n ? "regexp" : "[object Date]" === n ? "date" : "[object Arguments]" === n ? "arguments" : "[object Error]" === n ? "error" : "[object Promise]" === n ? "promise" : e(t) ? "buffer" : "[object Set]" === n ? "set" : "[object WeakSet]" === n ? "weakset" : "[object Map]" === n ? "map" : "[object WeakMap]" === n ? "weakmap" : "[object Symbol]" === n ? "symbol" : "[object Map Iterator]" === n ? "mapiterator" : "[object Set Iterator]" === n ? "setiterator" : "[object String Iterator]" === n ? "stringiterator" : "[object Array Iterator]" === n ? "arrayiterator" : "[object Int8Array]" === n ? "int8array" : "[object Uint8Array]" === n ? "uint8array" : "[object Uint8ClampedArray]" === n ? "uint8clampedarray" : "[object Int16Array]" === n ? "int16array" : "[object Uint16Array]" === n ? "uint16array" : "[object Int32Array]" === n ? "int32array" : "[object Uint32Array]" === n ? "uint32array" : "[object Float32Array]" === n ? "float32array" : "[object Float64Array]" === n ? "float64array" : "object")
- },
- k = n,
- A = "undefined" != typeof window && null !== window,
- z = function() {
- return !!(A && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) && ("isIntersecting" in window.IntersectionObserverEntry.prototype || Object.defineProperty(window.IntersectionObserverEntry.prototype, "isIntersecting", {
- get: function() {
- return this.intersectionRatio > 0
- }
- }), !0)
- }(),
- j = {
- event: "event",
- observer: "observer"
- },
- O = function() {
- 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
- }
- if(A) return "function" == typeof window.CustomEvent ? window.CustomEvent : (t.prototype = window.Event.prototype, t)
- }(),
- I = function() {
- var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1;
- return A ? window.devicePixelRatio || t : t
- },
- T = function() {
- if(A) {
- var t = !1;
- try {
- var e = Object.defineProperty({}, "passive", {
- get: function() {
- t = !0
- }
- });
- window.addEventListener("test", null, e)
- } catch(t) {}
- return t
- }
- }(),
- x = {
- on: function(t, e, n) {
- var r = arguments.length > 3 && void 0 !== arguments[3] && arguments[3];
- T ? t.addEventListener(e, n, {
- capture: r,
- passive: !0
- }) : t.addEventListener(e, n, r)
- },
- off: function(t, e, n) {
- var r = arguments.length > 3 && void 0 !== arguments[3] && arguments[3];
- t.removeEventListener(e, n, r)
- }
- },
- S = function(e, n, r) {
- if(!t) throw new Error("[vue-lazyload] cannot locate Axios");
- if(!e || !e.src) {
- var i = new Error("image src is required");
- return r(i)
- }
- var o = new Image;
- e.cors && (o.crossOrigin = e.cors), o.onload = function() {
- n({
- naturalHeight: o.naturalHeight,
- naturalWidth: o.naturalWidth,
- src: o.src
- })
- }, o.onerror = function(t) {
- r(t)
- }, t({
- method: "get",
- url: e.src,
- responseType: "arraybuffer"
- }).then(function(t) {
- var e = t.headers["content-type"].toLowerCase(),
- n = new Buffer(t.data, "binary").toString("base64");
- o.src = "data:" + e + ";base64," + n
- }).catch(function(t) {
- r(t)
- })
- },
- $ = function(t, e) {
- return "undefined" != typeof getComputedStyle ? getComputedStyle(t, null).getPropertyValue(e) : t.style[e]
- },
- C = function(t) {
- return $(t, "overflow") + $(t, "overflow-y") + $(t, "overflow-x")
- },
- H = function(t) {
- if(A) {
- if(!(t instanceof HTMLElement)) return window;
- for(var e = t; e && e !== document.body && e !== document.documentElement && e.parentNode;) {
- if(/(scroll|auto)/.test(C(e))) return e;
- e = e.parentNode
- }
- return window
- }
- },
- Q = function() {
- function t(e) {
- var n = e.max;
- g(this, t), this.options = {
- max: n || 100
- }, this._caches = []
- }
- return m(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
- }(),
- R = function() {
- function t(e) {
- var n = e.el,
- r = e.src,
- i = e.error,
- o = e.loading,
- s = e.bindType,
- a = e.$parent,
- u = e.options,
- d = e.cors,
- c = e.elRenderer,
- l = e.imageCache;
- g(this, t), this.el = n, this.src = r, this.error = i, this.loading = o, this.bindType = s, this.attempt = 0, this.cors = d, this.naturalHeight = 0, this.naturalWidth = 0, this.options = u, this.rect = null, this.$parent = a, this.elRenderer = c, this._imageCache = l, this.performanceData = {
- init: Date.now(),
- loadStart: 0,
- loadEnd: 0
- }, this.filter(), this.initState(), this.render("loading", !1)
- }
- return m(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,
- r = t.error,
- i = this.src;
- this.src = e, this.loading = n, this.error = r, this.filter(), i !== 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.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: "filter",
- value: function() {
- var t = this;
- v(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, S({
- 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] : y;
- 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"), S({
- 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
- }(),
- B = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
- W = ["scroll", "wheel", "mousewheel", "resize", "animationend", "transitionend", "touchmove"],
- D = {
- rootMargin: "0px",
- threshold: 0
- },
- V = function(t) {
- return function() {
- function e(t) {
- var n = t.preLoad,
- r = t.error,
- i = t.throttleWait,
- o = t.preLoadTop,
- s = t.dispatchEvent,
- a = t.loading,
- u = t.attempt,
- d = t.silent,
- c = void 0 === d || d,
- f = t.scale,
- v = t.listenEvents,
- p = (t.hasbind, t.filter),
- y = t.adapter,
- b = t.observer,
- m = t.observerOptions;
- g(this, e), this.version = "1.3.3", this.mode = j.event, this.ListenerQueue = [], this.TargetIndex = 0, this.TargetQueue = [], this.options = {
- silent: c,
- dispatchEvent: !!s,
- throttleWait: i || 200,
- preLoad: n || 1.3,
- preLoadTop: o || 0,
- error: r || B,
- loading: a || B,
- attempt: u || 3,
- scale: f || I(f),
- ListenEvents: v || W,
- hasbind: !1,
- supportWebp: l(),
- filter: p || {},
- adapter: y || {},
- observer: !!b,
- observerOptions: m || D
- }, this._initEvent(), this._imageCache = new Q({
- max: 200
- }), this.lazyLoadHandler = h(this._lazyLoadHandler.bind(this), this.options.throttleWait), this.setMode(this.options.observer ? j.observer : j.event)
- }
- return m(e, [{
- key: "config",
- value: function() {
- var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
- k(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), A && (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, r) {
- var i = this;
- if(u(this.ListenerQueue, function(t) {
- return t.el === e
- })) return this.update(e, n), t.nextTick(this.lazyLoadHandler);
- var o = this._valueFormatter(n.value),
- s = o.src,
- a = o.loading,
- c = o.error,
- l = o.cors;
- t.nextTick(function() {
- s = d(e, i.options.scale) || s, i._observer && i._observer.observe(e);
- var o = Object.keys(n.modifiers)[0],
- u = void 0;
- o && (u = r.context.$refs[o], u = u ? u.$el || u : document.getElementById(o)), u || (u = H(e));
- var h = new R({
- bindType: n.arg,
- $parent: u,
- el: e,
- loading: a,
- error: c,
- src: s,
- cors: l,
- elRenderer: i._elRenderer.bind(i),
- options: i.options,
- imageCache: i._imageCache
- });
- i.ListenerQueue.push(h), A && (i._addListenerTarget(window), i._addListenerTarget(u)), i.lazyLoadHandler(), t.nextTick(function() {
- return i.lazyLoadHandler()
- })
- })
- }
- }, {
- key: "update",
- value: function(e, n, r) {
- var i = this,
- o = this._valueFormatter(n.value),
- s = o.src,
- a = o.loading,
- u = o.error;
- s = d(e, this.options.scale) || s;
- var l = c(this.ListenerQueue, function(t) {
- return t.el === e
- });
- l ? l.update({
- src: s,
- loading: a,
- error: u
- }) : this.add(e, n, r), this._observer && (this._observer.unobserve(e), this._observer.observe(e)), this.lazyLoadHandler(), t.nextTick(function() {
- return i.lazyLoadHandler()
- })
- }
- }, {
- key: "remove",
- value: function(t) {
- if(t) {
- this._observer && this._observer.unobserve(t);
- var e = c(this.ListenerQueue, function(e) {
- return e.el === t
- });
- e && (this._removeListenerTarget(e.$parent), this._removeListenerTarget(window), a(this.ListenerQueue, e), e.$destroy())
- }
- }
- }, {
- key: "removeComponent",
- value: function(t) {
- t && (a(this.ListenerQueue, t), this._observer && this._observer.unobserve(t.el), t.$parent && t.$el.parentNode && this._removeListenerTarget(t.$el.parentNode), this._removeListenerTarget(window))
- }
- }, {
- key: "setMode",
- value: function(t) {
- var e = this;
- z || t !== j.observer || (t = j.event), this.mode = t, t === j.event ? (this._observer && (this.ListenerQueue.forEach(function(t) {
- e._observer.unobserve(t.el)
- }), this._observer = null), this.TargetQueue.forEach(function(t) {
- e._initListen(t.el, !0)
- })) : (this.TargetQueue.forEach(function(t) {
- e._initListen(t.el, !1)
- }), this._initIntersectionObserver())
- }
- }, {
- key: "_addListenerTarget",
- value: function(t) {
- if(t) {
- var e = c(this.TargetQueue, function(e) {
- return e.el === t
- });
- return e ? e.childrenCount++ : (e = {
- el: t,
- id: ++this.TargetIndex,
- childrenCount: 1,
- listened: !0
- }, this.mode === j.event && this._initListen(e.el, !0), this.TargetQueue.push(e)), this.TargetIndex
- }
- }
- }, {
- key: "_removeListenerTarget",
- value: function(t) {
- var e = this;
- this.TargetQueue.forEach(function(n, r) {
- n.el === t && (--n.childrenCount || (e._initListen(n.el, !1), e.TargetQueue.splice(r, 1), n = null))
- })
- }
- }, {
- key: "_initListen",
- value: function(t, e) {
- var n = this;
- this.options.ListenEvents.forEach(function(r) {
- return x[e ? "on" : "off"](t, r, n.lazyLoadHandler)
- })
- }
- }, {
- key: "_initEvent",
- value: function() {
- var t = this;
- this.Event = {
- listeners: {
- loading: [],
- loaded: [],
- error: []
- }
- }, this.$on = function(e, n) {
- t.Event.listeners[e] || (t.Event.listeners[e] = []), t.Event.listeners[e].push(n)
- }, this.$once = function(e, n) {
- function r() {
- i.$off(e, r), n.apply(i, arguments)
- }
- var i = t;
- t.$on(e, r)
- }, this.$off = function(e, n) {
- if(!n) {
- if(!t.Event.listeners[e]) return;
- return void(t.Event.listeners[e].length = 0)
- }
- a(t.Event.listeners[e], n)
- }, this.$emit = function(e, n, r) {
- t.Event.listeners[e] && t.Event.listeners[e].forEach(function(t) {
- return t(n, r)
- })
- }
- }
- }, {
- key: "_lazyLoadHandler",
- value: function() {
- var t = this,
- e = [];
- this.ListenerQueue.forEach(function(t, n) {
- t.el && t.el.parentNode || e.push(t), t.checkInView() && t.load()
- }), e.forEach(function(e) {
- a(t.ListenerQueue, e), e.$destroy()
- })
- }
- }, {
- key: "_initIntersectionObserver",
- value: function() {
- var t = this;
- z && (this._observer = new IntersectionObserver(this._observerHandler.bind(this), this.options.observerOptions), this.ListenerQueue.length && this.ListenerQueue.forEach(function(e) {
- t._observer.observe(e.el)
- }))
- }
- }, {
- key: "_observerHandler",
- value: function(t, e) {
- var n = this;
- t.forEach(function(t) {
- t.isIntersecting && n.ListenerQueue.forEach(function(e) {
- if(e.el === t.target) {
- if(e.state.loaded) return n._observer.unobserve(e.el);
- e.load()
- }
- })
- })
- }
- }, {
- key: "_elRenderer",
- value: function(t, e, n) {
- if(t.el) {
- var r = t.el,
- i = t.bindType,
- o = void 0;
- switch(e) {
- case "loading":
- o = t.loading;
- break;
- case "error":
- o = t.error;
- break;
- default:
- o = t.src
- }
- if(i ? r.style[i] = 'url("' + o + '")' : r.getAttribute("src") !== o && r.setAttribute("src", o), r.setAttribute("lazy", e), this.$emit(e, t, n), this.options.adapter[e] && this.options.adapter[e](t, this.options), this.options.dispatchEvent) {
- var s = new O(e, {
- detail: t
- });
- r.dispatchEvent(s)
- }
- }
- }
- }, {
- key: "_valueFormatter",
- value: function(t) {
- var e = t,
- n = this.options.loading,
- r = this.options.error;
- return f(t) && (t.src || this.options.silent || console.error("Vue Lazyload warning: miss src with " + t), e = t.src, n = t.loading || this.options.loading, r = t.error || this.options.error), {
- src: e,
- loading: n,
- error: r
- }
- }
- }]), e
- }()
- },
- P = function(t) {
- return {
- props: {
- tag: {
- type: String,
- default: "div"
- }
- },
- render: function(t) {
- return !1 === this.show ? t(this.tag) : t(this.tag, null, this.$slots.default)
- },
- 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(), A && this.rect.top < window.innerHeight * t.options.preLoad && this.rect.bottom > 0 && this.rect.left < window.innerWidth * t.options.preLoad && this.rect.right > 0
- },
- load: function() {
- this.show = !0, this.state.loaded = !0, this.$emit("show", this)
- },
- destroy: function() {
- return this.$destroy
- }
- }
- }
- },
- N = function() {
- function t(e) {
- var n = e.lazy;
- g(this, t), this.lazy = n, n.lazyContainerMananger = this, this._queue = []
- }
- return m(t, [{
- key: "bind",
- value: function(t, e, n) {
- var r = new q({
- el: t,
- binding: e,
- vnode: n,
- lazy: this.lazy
- });
- this._queue.push(r)
- }
- }, {
- key: "update",
- value: function(t, e, n) {
- var r = c(this._queue, function(e) {
- return e.el === t
- });
- r && r.update({
- el: t,
- binding: e,
- vnode: n
- })
- }
- }, {
- key: "unbind",
- value: function(t, e, n) {
- var r = c(this._queue, function(e) {
- return e.el === t
- });
- r && (r.clear(), a(this._queue, r))
- }
- }]), t
- }(),
- M = {
- selector: "img"
- },
- q = function() {
- function t(e) {
- var n = e.el,
- r = e.binding,
- i = e.vnode,
- o = e.lazy;
- g(this, t), this.el = null, this.vnode = i, this.binding = r, this.options = {}, this.lazy = o, this._queue = [], this.update({
- el: n,
- binding: r
- })
- }
- return m(t, [{
- key: "update",
- value: function(t) {
- var e = this,
- n = t.el,
- r = t.binding;
- this.el = n, this.options = k({}, M, r.value), this.getImgs().forEach(function(t) {
- e.lazy.add(t, k({}, 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 p(this.el.querySelectorAll(this.options.selector))
- }
- }, {
- key: "clear",
- value: function() {
- var t = this;
- this.getImgs().forEach(function(e) {
- return t.lazy.remove(e)
- }), this.vnode = null, this.binding = null, this.lazy = null
- }
- }]), t
- }(),
- F = 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,
- r = e.loading,
- i = e.error;
- this.state.loaded = !1, this.options.src = n, this.options.error = i, this.options.loading = r, this.renderSrc = this.options.loading
- },
- getRect: function() {
- this.rect = this.$el.getBoundingClientRect()
- },
- checkInView: function() {
- return this.getRect(), A && this.rect.top < window.innerHeight * t.options.preLoad && this.rect.bottom > 0 && this.rect.left < window.innerWidth * t.options.preLoad && this.rect.right > 0
- },
- load: function() {
- var e = this,
- n = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : y;
- 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 r = this.options.src;
- S({
- src: r
- }, 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
- })
- }
- }
- }
- };
- return {
- install: function(t) {
- var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
- n = V(t),
- r = new n(e),
- i = new N({
- lazy: r
- }),
- o = "2" === t.version.split(".")[0];
- t.prototype.$Lazyload = r, e.lazyComponent && t.component("lazy-component", P(r)), e.lazyImage && t.component("lazy-image", F(r)), o ? (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: function(t, e) {
- k(this.vm.$refs, this.vm.$els), r.add(this.el, {
- modifiers: this.modifiers || {},
- arg: this.arg,
- value: t,
- oldValue: e
- }, {
- context: this.vm
- })
- },
- unbind: function() {
- r.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)
- }
- }))
- }
- }
- });
|