add: Intersection observer

franksoong · Aug 31, 2017 · 5e9e437 · 5e9e437
1 parent 584e547
commit 5e9e437
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -106,6 +106,8 @@ new Vue({
 |`filter`| the image's listener filter |`{ }`| [Image listener filter](#image-listener-filter) |
 |`lazyComponent`| lazyload component | `false` | [Lazy Component](#lazy-component)
 | `dispatchEvent`|trigger the dom event|`false`|`Boolean`|
+| `observer`|use IntersectionObserver|`false`|`Boolean`|
+| `observerOptions`|IntersectionObserver options|{ rootMargin: '0px', threshold: 0.1 }|[IntersectionObserver](#intersectionobserver)|
 
 ### Desired Listen Events
 
@@ -173,6 +175,24 @@ Vue.use(vueLazy, {
 })
 ```
 
+### IntersectionObserver
+
+use [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to to improve performance of a large number of nodes.
+
+```javascript
+Vue.use(vueLazy, {
+  // set observer to true
+  observer: true,
+
+  // optional
+  observerOptions: {
+    rootMargin: '0px', 
+    threshold: 0.1
+  }
+})
+```
+
+
 ### Lazy Component
 
 ```html

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-lazyload",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Vue module for lazy-loading images in your vue.js applications.",
   "main": "vue-lazyload.js",
   "scripts": {

diff --git a/src/lazy-component.js b/src/lazy-component.js
@@ -16,6 +16,7 @@ export default (lazy) => {
         },
         data () {
             return {
+                el: null,
                 state: {
                     loaded: false
                 },
@@ -24,6 +25,7 @@ export default (lazy) => {
             }
         },
         mounted () {
+            this.el = this.$el
             lazy.addLazyBox(this)
             lazy.lazyLoadHandler()
         },

diff --git a/src/lazy.js b/src/lazy.js
@@ -17,11 +17,16 @@ import ReactiveListener from './listener'
 
 const DEFAULT_URL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
 const DEFAULT_EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
+const DEFAULT_OBSERVER_OPTIONS = {
+    rootMargin: '0px', 
+    threshold: 0.1
+}
 
 export default function (Vue) {
     return class Lazy {
-        constructor ({ preLoad, error, preLoadTop, dispatchEvent, loading, attempt, silent, scale, listenEvents, hasbind, filter, adapter }) {
+        constructor ({ preLoad, error, preLoadTop, dispatchEvent, loading, attempt, silent, scale, listenEvents, hasbind, filter, adapter, observer, observerOptions }) {
             this.version = '__VUE_LAZYLOAD_VERSION__'
+            this.mode = 'event'
             this.ListenerQueue = []
             this.TargetIndex = 0
             this.TargetQueue = []
@@ -38,18 +43,13 @@ export default function (Vue) {
                 hasbind: false,
                 supportWebp: supportWebp(),
                 filter: filter || {},
-                adapter: adapter || {}
+                adapter: adapter || {},
+                observer: !!observer,
+                observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS
             }
             this._initEvent()
 
-            this.lazyLoadHandler = throttle(() => {
-                let catIn = false
-                this.ListenerQueue.forEach(listener => {
-                    if (listener.state.loaded) return
-                    catIn = listener.checkInView()
-                    catIn && listener.load()
-                })
-            }, 200)
+            this.setMode(this.options.observer ? 'observer' : 'event')
         }
 
         /**
@@ -75,6 +75,7 @@ export default function (Vue) {
             return list
         }
 
+
         /**
          * add lazy component to queue
          * @param  {Vue} vm lazy component instance
@@ -84,6 +85,7 @@ export default function (Vue) {
             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)
                 }
@@ -103,6 +105,8 @@ export default function (Vue) {
                 return Vue.nextTick(this.lazyLoadHandler)
             }
 
+            this._observer && this._observer.observe(el)
+
             let { src, loading, error } = this._valueFormatter(binding.value)
 
             Vue.nextTick(() => {
@@ -192,6 +196,23 @@ export default function (Vue) {
             }
             this._removeListenerTarget(window)
         }
+
+        setMode (mode) {
+            this.mode = mode // event or observer
+            if (mode === 'event') {
+                this.lazyLoadHandler = throttle(() => {
+                    let catIn = false
+                    this.ListenerQueue.forEach(listener => {
+                        if (listener.state.loaded) return
+                        catIn = listener.checkInView()
+                        catIn && listener.load()
+                    })
+                }, 200)
+            } else {
+                this._initIntersectionObserver()
+                this.lazyLoadHandler = () => {}
+            }
+        }
 
         /**** Private functions ****/
 
@@ -281,6 +302,39 @@ export default function (Vue) {
             }
         }
 
+        /**
+         * init IntersectionObserver
+         * set mode to observer
+         * @return
+         */
+        _initIntersectionObserver () {
+            if (inBrowser && 'IntersectionObserver' in window) {
+                this._observer = new IntersectionObserver(this._observerHandler.bind(this), this.options.observerOptions)
+                if (this.ListenerQueue.length) {
+                    this.ListenerQueue.forEach(listener => {
+                        this._observer.observer(listener.el)
+                    })
+                }
+            }
+        }
+
+        /**
+         * 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
+                            listener.load()
+                        }
+
+                    })
+                }
+            })
+        }
 
         /**
          * set element attribute with image'url and state

diff --git a/vue-lazyload.js b/vue-lazyload.js