fix: issue#133

hilongjw · Mar 29, 2017 · 3b0eab9 · 3b0eab9
1 parent 2b7f9af
commit 3b0eab9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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