From 3b0eab91a146af2c62e4104102ad3df29bce2407 Mon Sep 17 00:00:00 2001 From: Awe Date: Wed, 29 Mar 2017 13:59:50 +0800 Subject: [PATCH] fix: issue#133 --- src/lazy-component.js | 2 +- src/lazy.js | 46 ++++++++++++++----------------------------- src/listener.js | 23 +++++++++++++++++++--- 3 files changed, 36 insertions(+), 35 deletions(-) diff --git a/src/lazy-component.js b/src/lazy-component.js index 4ed9554..9eb67be 100644 --- a/src/lazy-component.js +++ b/src/lazy-component.js @@ -37,7 +37,7 @@ export default (lazy) => { checkInView () { this.getRect() return inBrowser && - (this.rect.top < window.innerHeight * lazy.options.preLoad && this.rect.bottom > lazy.options.preLoadTop) && + (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 () { diff --git a/src/lazy.js b/src/lazy.js index 5a54c32..55cd74e 100644 --- a/src/lazy.js +++ b/src/lazy.js @@ -1,7 +1,7 @@ -import { - remove, - some, - find, +import { + remove, + some, + find, _, throttle, supportWebp, @@ -19,7 +19,7 @@ const DEFAULT_EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend export default function (Vue) { return class Lazy { - constructor({ preLoad, preLoadTop, error, loading, attempt, silent, scale, listenEvents, hasbind, filter, adapter }) { + constructor ({ preLoad, error, preLoadTop, loading, attempt, silent, scale, listenEvents, hasbind, filter, adapter }) { this.ListenerQueue = [] this.options = { silent: silent || true, @@ -28,7 +28,7 @@ export default function (Vue) { error: error || DEFAULT_URL, loading: loading || DEFAULT_URL, attempt: attempt || 3, - scale: getDPR(scale), + scale: scale || getDPR(scale), ListenEvents: listenEvents || DEFAULT_EVENTS, hasbind: false, supportWebp: supportWebp(), @@ -69,7 +69,7 @@ export default function (Vue) { /** * add image listener to queue - * @param {DOM} el + * @param {DOM} el * @param {object} binding vue directive binding * @param {vnode} vnode vue directive vnode * @return @@ -113,7 +113,7 @@ export default function (Vue) { options: this.options }) - this.ListenerQueue.push(this.listenerFilter(newListener)) + this.ListenerQueue.push(newListener) if (!this.ListenerQueue.length || this.options.hasbind) return @@ -127,7 +127,7 @@ export default function (Vue) { /** * update image src - * @param {DOM} el + * @param {DOM} el * @param {object} vue directive binding * @return */ @@ -136,7 +136,7 @@ export default function (Vue) { const exist = find(this.ListenerQueue, item => item.el === el) - exist && exist.src !== src && exist.update({ + exist && exist.update({ src, loading, error @@ -147,7 +147,7 @@ export default function (Vue) { /** * remove listener form list - * @param {DOM} el + * @param {DOM} el * @return */ remove (el) { @@ -159,7 +159,7 @@ export default function (Vue) { /** * remove lazy components form list - * @param {Vue} vm Vue instance + * @param {Vue} vm Vue instance * @return */ removeComponent (vm) { @@ -215,7 +215,7 @@ export default function (Vue) { /** * output listener's load performance - * @return {Array} + * @return {Array} */ performance () { let list = [] @@ -231,7 +231,7 @@ export default function (Vue) { * 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 + * @param {bool} inCache is rendered from cache * @return */ elRenderer (listener, state, cache) { @@ -264,23 +264,7 @@ export default function (Vue) { } /** - * listener filter - * @param {ReactiveListener} listener instance - * @return {ReactiveListener} listener instance - */ - listenerFilter (listener) { - if (this.options.filter.webp && this.options.supportWebp) { - listener.src = this.options.filter.webp(listener, this.options) - } - if (this.options.filter.customer) { - listener.src = this.options.filter.customer(listener, this.options) - } - return listener - } - - - /** - * generate loading loaded error image url + * generate loading loaded error image url * @param {string} image's src * @return {object} image's loading, loaded, error url */ diff --git a/src/listener.js b/src/listener.js index bfb1c99..bb2d125 100644 --- a/src/listener.js +++ b/src/listener.js @@ -16,6 +16,8 @@ export default class ReactiveListener { this.options = options + this.filter() + this.initState() this.performanceData = { @@ -59,11 +61,15 @@ export default class ReactiveListener { * @return */ update ({ src, loading, error }) { + const oldSrc = this.src this.src = src this.loading = loading this.error = error - this.attempt = 0 - this.initState() + this.filter() + if (oldSrc !== this.src) { + this.attempt = 0 + this.initState() + } } /** @@ -84,6 +90,18 @@ export default class ReactiveListener { (this.rect.left < window.innerWidth * this.options.preLoad && this.rect.right > 0) } + /** + * listener filter + */ + filter () { + if (this.options.filter.webp && this.options.supportWebp) { + this.src = this.options.filter.webp(this, this.options) + } + if (this.options.filter.customer) { + this.src = this.options.filter.customer(this, this.options) + } + } + /** * try load image and render it * @return @@ -107,7 +125,6 @@ export default class ReactiveListener { loadImageAsync({ src: this.src }, data => { - this.src = data.src this.naturalHeight = data.naturalHeight this.naturalWidth = data.naturalWidth this.state.loaded = true