fix: issue#150

package.json

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

src/index.js

@@ -2,7 +2,6 @@ import Lazy from './lazy'
 import LazyComponent from './lazy-component'
 import { assign } from './util'
 
-
 export default {
     /**
      * install function
@@ -12,6 +11,7 @@ export default {
     install (Vue, options = {}) {
         const LazyClass = Lazy(Vue)
         const lazy = new LazyClass(options)
+
         const isVueNext = Vue.version.split('.')[0] === '2'
 
         Vue.prototype.$Lazyload = lazy

src/listener.js

@@ -1,4 +1,4 @@
-import { loadImageAsync } from './util'
+import { loadImageAsync, ObjectKeys } from './util'
 
 let imageCache = {}
 
@@ -94,12 +94,23 @@ export default class ReactiveListener {
      * 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)
-        }
+        ObjectKeys(this.options.filter).map(key => {
+            this.options.filter[key](this, this.options)
+        })
+    }
+
+    /**
+     * render loading first
+     * @params cb:Function
+     * @return
+     */
+    renderLoading (cb) {
+        loadImageAsync({
+            src: this.loading
+        }, data => {
+            this.render('loading', false)
+            cb()
+        })
     }
 
     /**
@@ -116,26 +127,26 @@ export default class ReactiveListener {
             return this.render('loaded', true)
         }
 
-        this.render('loading', false)
-
-        this.attempt++
-
-        this.record('loadStart')
-
-        loadImageAsync({
-            src: this.src
-        }, data => {
-            this.naturalHeight = data.naturalHeight
-            this.naturalWidth = data.naturalWidth
-            this.state.loaded = true
-            this.state.error = false
-            this.record('loadEnd')
-            this.render('loaded', false)
-            imageCache[this.src] = 1
-        }, err => {
-            this.state.error = true
-            this.state.loaded = false
-            this.render('error', false)
+        this.renderLoading(() => {
+            this.attempt++
+
+            this.record('loadStart')
+
+            loadImageAsync({
+                src: this.src
+            }, data => {
+                this.naturalHeight = data.naturalHeight
+                this.naturalWidth = data.naturalWidth
+                this.state.loaded = true
+                this.state.error = false
+                this.record('loadEnd')
+                this.render('loaded', false)
+                imageCache[this.src] = 1
+            }, err => {
+                this.state.error = true
+                this.state.loaded = false
+                this.render('error', false)
+            })
         })
     }
 

src/util.js

@@ -108,6 +108,7 @@ function supportWebp () {
     try {
         let el = d.createElement('object')
         el.type = 'image/webp'
+        el.style.visibility = 'hidden'
         el.innerHTML = '!'
         d.body.appendChild(el)
         support = !el.offsetWidth
@@ -232,6 +233,21 @@ function isObject (obj) {
   return obj !== null && typeof obj === 'object'
 }
 
+function ObjectKeys (obj) {
+    if (!(obj instanceof Object)) return []
+    if (Object.keys) {
+        return Object.keys(obj)
+    } else {
+        let keys = []
+        for (let key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                keys.push(key)
+            }
+        }
+        return keys
+    }
+}
+
 export {
     inBrowser,
     remove,
@@ -245,5 +261,6 @@ export {
     getDPR,
     scrollParent,
     loadImageAsync,
-    getBestSelectionFromSrcset
+    getBestSelectionFromSrcset,
+    ObjectKeys
 }