add: listener target queue

hilongjw · Mar 29, 2017 · 0a4866b · 0a4866b
1 parent cd1032e
commit 0a4866b
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-lazyload",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Vue module for lazy-loading images in your vue.js applications.",
   "main": "vue-lazyload.js",
   "scripts": {

diff --git a/src/lazy.js b/src/lazy.js
@@ -1,4 +1,5 @@
 import { 
+    inBrowser,
     remove, 
     some, 
     find, 
@@ -21,6 +22,8 @@ export default function (Vue) {
     return class Lazy {
         constructor ({ preLoad, error, preLoadTop, loading, attempt, silent, scale, listenEvents, hasbind, filter, adapter }) {
             this.ListenerQueue = []
+            this.TargetIndex = 0
+            this.TargetQueue = []
             this.options = {
                 silent: silent || true,
                 preLoad: preLoad || 1.3,
@@ -63,8 +66,53 @@ export default function (Vue) {
          */
         addLazyBox (vm) {
             this.ListenerQueue.push(vm)
-            this.options.hasbind = true
-            this.initListen(window, true)
+            if (inBrowser) {
+                this._addListenerTarget(window)
+                if (vm.$el && vm.$el.parentNode) {
+                    this._addListenerTarget(vm.$el.parentNode)
+                }
+            }
+        }
+
+        /**
+         * 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.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
+         */
+        _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
+                    }
+                }
+            })
         }
 
         /**
@@ -83,11 +131,7 @@ export default function (Vue) {
             let { src, loading, error } = this.valueFormatter(binding.value)
 
             Vue.nextTick(() => {
-                let tmp = getBestSelectionFromSrcset(el, this.options.scale)
-
-                if (tmp) {
-                    src = tmp
-                }
+                src = getBestSelectionFromSrcset(el, this.options.scale) || src
 
                 const container = Object.keys(binding.modifiers)[0]
                 let $parent
@@ -114,12 +158,11 @@ export default function (Vue) {
                 })
 
                 this.ListenerQueue.push(newListener)
+                if (inBrowser) {
+                    this._addListenerTarget(window)
+                    this._addListenerTarget($parent)
+                }
 
-                if (!this.ListenerQueue.length || this.options.hasbind) return
-
-                this.options.hasbind = true
-                this.initListen(window, true)
-                $parent && this.initListen($parent, true)
                 this.lazyLoadHandler()
                 Vue.nextTick(() => this.lazyLoadHandler())
             })
@@ -153,8 +196,11 @@ export default function (Vue) {
         remove (el) {
             if (!el) return
             const existItem = find(this.ListenerQueue, item => item.el === el)
-            existItem && remove(this.ListenerQueue, existItem) && existItem.destroy()
-            this.options.hasbind && !this.ListenerQueue.length && this.initListen(window, false)
+            if (existItem) {
+                this._removeListenerTarget(existItem.$parent)
+                this._removeListenerTarget(window)
+                remove(this.ListenerQueue, existItem) && existItem.destroy()
+            }
         }
 
         /**
@@ -163,8 +209,12 @@ export default function (Vue) {
          * @return
          */
         removeComponent (vm) {
-            vm && remove(this.ListenerQueue, vm)
-            this.options.hasbind && !this.ListenerQueue.length && this.initListen(window, false)
+            if (!vm) return
+            remove(this.ListenerQueue, vm)
+            if (vm.$parent && vm.$el.parentNode) {
+                this._removeListenerTarget(vm.$el.parentNode)
+            }
+            this._removeListenerTarget(window)
         }
 
         /**
@@ -174,7 +224,6 @@ export default function (Vue) {
          * @return
          */
         initListen (el, start) {
-            this.options.hasbind = start
             this.options.ListenEvents.forEach((evt) => _[start ? 'on' : 'off'](el, evt, this.lazyLoadHandler))
         }