fix: stop working with vue2.2.0

README.md

@@ -84,6 +84,7 @@ new Vue({
 |`listenEvents`|events that you want vue listen for|`['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']`| [Desired Listen Events](#desired-listen-events) |
 |`adapter`| dynamically modify the attribute of element |`{ }`| [Element Adapter](#element-adapter) |
 |`filter`| the image's src filter |`{ }`| [Image url filter](#image-url-filter) |
+|`lazyComponent`| lazyload component | `false` | [Lazy Component](#lazy-component)
 
 ### Desired Listen Events
 
@@ -150,6 +151,26 @@ Vue.use(vueLazy, {
 })
 ```
 
+### Lazy Component
+
+```html
+<lazy-component @show="handler">
+  <img class="mini-cover" :src="img.src" width="100%" height="400">
+</lazy-component>
+
+<script>
+  {
+    ...
+    methods: {
+      handler (component) {
+        console.log('this component is showing')
+      }
+    }
+
+  }
+</script>
+```
+
 
 ## Implementation
 
@@ -253,7 +274,7 @@ There are three states while img loading
 #### Example
 
 ```javascript
-vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }) {
+vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
   console.log(el, src)
 })
 ```
@@ -285,7 +306,7 @@ If only the event is provided, remove all listeners for that event
 #### Example
 
 ```javascript
-function handler ({ el, src }) {
+function handler ({ el, src }, formCache) {
   console.log(el, src)
 } 
 vm.$Lazyload.$on('loaded', handler)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-lazyload",
-  "version": "1.0.0-rc11",
+  "version": "1.0.0-rc12",
   "description": "Vue module for lazy-loading images in your vue.js applications.",
   "main": "vue-lazyload.js",
   "scripts": {

src/index.js

@@ -15,7 +15,10 @@ export default {
         const isVueNext = Vue.version.split('.')[0] === '2'
 
         Vue.prototype.$Lazyload = lazy
-        Vue.component('lazy-component', LazyComponent(lazy))
+
+        if (options.lazyComponent) {
+            Vue.component('lazy-component', LazyComponent(lazy))
+        }
 
         if (isVueNext) {
             Vue.directive('lazy', {

src/lazy-component.js

@@ -35,6 +35,9 @@ export default (lazy) => {
             lazy.addLazyBox(this)
             lazy.lazyLoadHandler()
         },
+        beforeDestroy () {
+            lazy.removeComponent(this)
+        },
         methods: {
             getRect () {
                 this.rect = this.$el.getBoundingClientRect()
@@ -46,21 +49,8 @@ export default (lazy) => {
                     (this.rect.left < window.innerWidth * lazy.options.preLoad && this.rect.right > 0)
             },
             load () {
-                if (
-                    typeof this.$el.attributes.lazy !== 'undefined'
-                        &&
-                    typeof this.$el.attributes.lazy.value !== 'undefined'
-                ) {
-                    var state = this.$el.attributes.lazy.value;
-                    this.state.loaded = state === 'loaded'
-                    this.state.error = state === 'error'
-                    this.$emit(state, this.$el)
-                } else {
-                    this.$emit('loading', this.$el)
-                    this.$nextTick(lazy.lazyLoadHandler)
-                }
-
                 this.show = true
+                this.$emit('show', this)
             }
         }
     }

src/lazy.js

@@ -8,7 +8,8 @@ import {
     getDPR,
     scrollParent,
     getBestSelectionFromSrcset,
-    assign
+    assign,
+    isObject
 } from './util'
 
 import ReactiveListener from './listener'
@@ -125,6 +126,11 @@ export default function (Vue) {
             this.options.hasbind && !this.ListenerQueue.length && this.initListen(window, false)
         }
 
+        removeComponent (vm) {
+            vm && remove(this.ListenerQueue, vm)
+            this.options.hasbind && !this.ListenerQueue.length && this.initListen(window, false)
+        }
+
         initListen (el, start) {
             this.options.hasbind = start
             this.options.ListenEvents.forEach((evt) => _[start ? 'on' : 'off'](el, evt, this.lazyLoadHandler))
@@ -141,24 +147,27 @@ export default function (Vue) {
 
             this.$on = (event, func) => {
                 this.Event.listeners[event].push(func)
-            },
+            }
+
             this.$once = (event, func) => {
                 const vm = this
                 function on () {
                     vm.$off(event, on)
                     func.apply(vm, arguments)
                 }
                 this.$on(event, on)
-            },
+            }
+
             this.$off = (event, func) => {
                 if (!func) {
                     this.Event.listeners[event] = []
                     return
                 }
                 remove(this.Event.listeners[event], func)
-            },
-            this.$emit = (event, context) => {
-                this.Event.listeners[event].forEach(func => func(context))
+            }
+
+            this.$emit = (event, context, inCache) => {
+                this.Event.listeners[event].forEach(func => func(context, inCache))
             }
         }
 
@@ -176,10 +185,10 @@ 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} notify  will send notification
+         * @param  {bool} inCache  is rendered from cache 
          * @return
          */
-        elRenderer (listener, state, notify) {
+        elRenderer (listener, state, cache) {
             if (!listener.el) return
             const { el, bindType } = listener
 
@@ -204,8 +213,7 @@ export default function (Vue) {
 
             el.setAttribute('lazy', state)
 
-            if (!notify) return
-            this.$emit(state, listener)
+            this.$emit(state, listener, cache)
             this.options.adapter[state] && this.options.adapter[state](listener, this.options)
         }
 
@@ -231,8 +239,8 @@ export default function (Vue) {
             let error = this.options.error
 
             // value is object
-            if (Vue.util.isObject(value)) {
-                if (!value.src && !this.options.silent) Vue.util.warn('Vue Lazyload warning: miss src with ' + value)
+            if (isObject(value)) {
+                if (!value.src && !this.options.silent) console.error('Vue Lazyload warning: miss src with ' + value)
                 src = value.src
                 loading = value.loading || this.options.loading
                 error = value.error || this.options.error

src/listener.js

@@ -67,10 +67,10 @@ export default class ReactiveListener {
         }
 
         if (this.state.loaded || imageCache[this.src]) {
-            return this.render('loaded')
+            return this.render('loaded', true)
         }
 
-        this.render('loading', true)
+        this.render('loading', false)
 
         this.attempt++
 
@@ -85,17 +85,17 @@ export default class ReactiveListener {
             this.state.loaded = true
             this.state.error = false
             this.record('loadEnd')
-            this.render('loaded', true)
+            this.render('loaded', false)
             imageCache[this.src] = 1
         }, err => {
             this.state.error = true
             this.state.loaded = false
-            this.render('error', true)
+            this.render('error', false)
         })
     }
 
-    render (state, notify) {
-        this.elRenderer(this, state, notify)
+    render (state, cache) {
+        this.elRenderer(this, state, cache)
     }
 
     performance () {

src/util.js

@@ -28,9 +28,9 @@ function some (arr, fn) {
 }
 
 function getBestSelectionFromSrcset (el, scale) {
-    if (el.tagName !== 'IMG' || !el.getAttribute('srcset')) return
+    if (el.tagName !== 'IMG' || !el.getAttribute('data-srcset')) return
 
-    let options = el.getAttribute('srcset')
+    let options = el.getAttribute('data-srcset')
     const result = []
     const container = el.parentNode
     const containerWidth = container.offsetWidth * scale
@@ -228,13 +228,18 @@ const scrollParent = (el) => {
     return window
 }
 
+function isObject (obj) {
+  return obj !== null && typeof obj === 'object'
+}
+
 export {
     inBrowser,
     remove,
     some,
     find,
     assign,
     _,
+    isObject,
     throttle,
     supportWebp,
     getDPR,