upadte docs

chris-ng-scmp · Jan 12, 2017 · cb6424d · cb6424d
1 parent db692f8
commit cb6424d
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -10,15 +10,18 @@ Vue module for lazyloading images in your applications. Some of goals of this pr
 
 
 # Table of Contents
+
 * [___Demo___](#demo)
 * [___Requirements___](#requirements)
 * [___Installation___](#installation)
 * [___Usage___](#usage)  
  * [___Constructor Options___](#constructor-options)
- * [___Implementation___](#implementation) 
-   * [___Basic___](#basic) 
-   * [___Css state___](#css-state)  
+ * [___Implementation___](#implementation)
+    * [___Basic___](#basic)
+      * [___Css state___](#css-state)
 * [___Methods___](#methods)
+  * [__Event hook__](#event-hook)
+  * [__Performance__](#performance)
 * [___Authors && Contributors___](#authors-&&-Contributors)
 * [___License___](#license)
 
@@ -81,6 +84,79 @@ new Vue({
 |`adapter`| |`{ }`|`{ loaded () { ... }, loading () { ... }, error () { ... } }`|
 |`filter`|the image's src filter |`{ }`|`{ webp ({ src }) { ... } }`|
 
+### Desired Listen Events
+
+You can configure which events you want vue-lazyload by passing in an array
+of listener names.
+
+```javascript
+Vue.use(VueLazyload, {
+  preLoad: 1.3,
+  error: 'dist/error.png',
+  loading: 'dist/loading.gif',
+  attempt: 1,
+  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
+  listenEvents: [ 'scroll' ]
+})
+```
+
+This is useful if you are having trouble with this plugin resetting itself to loading
+when you have certain animations and transitions taking place
+
+
+### Image url filter
+
+```javascript
+Vue.use(vueLazy, {
+    preLoad: 1.3,
+    error: 'dist/404.png',
+    loading: 'dist/loading-spin.svg',
+    adapter: {
+        loaded (listender, Init) {
+            console.log('loaded')
+        },
+        loading (listender, Init) {
+            console.log('loading')
+        },
+        error (listender, Init) {
+            console.log('error')
+        }
+    },
+    filter: {
+        webp ({ src }) {
+            const isCDN = /qiniudn.com/
+            if (isCDN.test(src)) {
+                src += '?imageView2/2/format/webp'
+            }
+            return src
+        }
+    }
+})
+```
+
+
+### Element Adapter
+
+```javascript
+Vue.use(vueLazy, {
+    preLoad: 1.3,
+    error: 'dist/404.png',
+    loading: 'dist/loading-spin.svg',
+    adapter: {
+        loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
+            // do something here
+            console.log('loaded')
+        },
+        loading (listender, Init) {
+            console.log('loading')
+        },
+        error (listender, Init) {
+            console.log('error')
+        }
+    }
+})
+```
+
 
 ## Implementation
 
@@ -164,7 +240,17 @@ There are three states while img loading
 
 ## Methods
 
-### `vm.$Lazyload.$on(event, callback)`
+### Event Hook
+
+`vm.$Lazyload.$on(event, callback)`
+`vm.$Lazyload.$off(event, callback)`
+`vm.$Lazyload.$once(event, callback)`
+
+- `$on` Listen for a custom events `loading`, `loaded`, `error` 
+- `$once` Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
+- `$off` Remove event listener(s).
+
+#### `vm.$Lazyload.$on`
 
 #### Arguments:
 
@@ -179,9 +265,7 @@ vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth
 })
 ```
 
-### `vm.$Lazyload.$once(event, callback)`
-
-Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
+#### `vm.$Lazyload.$once`
 
 #### Arguments:
 
@@ -196,9 +280,7 @@ vm.$Lazyload.$once('loaded', function ({ el, src }) {
 })
 ```
 
-### `vm.$Lazyload.$off(event, callback)`
-
-Remove event listener(s).
+#### `vm.$Lazyload.$off`
 
 If only the event is provided, remove all listeners for that event
 
@@ -215,80 +297,17 @@ function handler ({ el, src }) {
 } 
 vm.$Lazyload.$on('loaded', handler)
 vm.$Lazyload.$off('loaded', handler)
+vm.$Lazyload.$off('loaded')
 ```
 
-### Desired Listen Events
-
-You can configure which events you want vue-lazyload by passing in an array
-of listener names.
+### Performance
 
-```javascript
-Vue.use(VueLazyload, {
-  preLoad: 1.3,
-  error: 'dist/error.png',
-  loading: 'dist/loading.gif',
-  attempt: 1,
-  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
-  listenEvents: [ 'scroll' ]
-})
 ```
-
-This is useful if you are having trouble with this plugin resetting itself to loading
-when you have certain animations and transitions taking place
-
-
-## Image url filter
-
-```javascript
-Vue.use(vueLazy, {
-    preLoad: 1.3,
-    error: 'dist/404.png',
-    loading: 'dist/loading-spin.svg',
-    adapter: {
-        loaded (listender, Init) {
-            console.log('loaded')
-        },
-        loading (listender, Init) {
-            console.log('loading')
-        },
-        error (listender, Init) {
-            console.log('error')
-        }
-    },
-    filter: {
-        webp ({ src }) {
-            const isCDN = /qiniudn.com/
-            if (isCDN.test(src)) {
-                src += '?imageView2/2/format/webp'
-            }
-            return src
-        }
-    }
-})
-```
-
-
-## Element Adapter
-
-```javascript
-Vue.use(vueLazy, {
-    preLoad: 1.3,
-    error: 'dist/404.png',
-    loading: 'dist/loading-spin.svg',
-    adapter: {
-        loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
-            // do something here
-            console.log('loaded')
-        },
-        loading (listender, Init) {
-            console.log('loading')
-        },
-        error (listender, Init) {
-            console.log('error')
-        }
-    }
+this.$Lazyload.$on('loaded', (listener) {
+  console.table(this.$Lazyload.performance())
 })
 ```
+![performance](https://dn-mhke0kuv.qbox.me/d7878f67bf3b18accc44.png)
 
 # Authors && Contributors
 

diff --git a/src/lazy.js b/src/lazy.js
@@ -149,7 +149,7 @@ export default class Lazy {
             if (item.performance.loadEnd) {
               list.push({
                 src: item.src,
-                timing: (item.performance.loadEnd - item.performance.loadStart) / 1000
+                time: (item.performance.loadEnd - item.performance.loadStart) / 1000
               })
             }
         })

diff --git a/src/listener.js b/src/listener.js
@@ -78,7 +78,6 @@ export default class ReactiveListener {
         loadImageAsync({
             src: this.src
         }, data => {
-            console.log(window.aa = data)
             this.naturalHeight = data.naturalHeight
             this.naturalWidth = data.naturalWidth
             this.state.loaded = true

diff --git a/vue-lazyload.js b/vue-lazyload.js
@@ -289,7 +289,6 @@ var ReactiveListener = function () {
             loadImageAsync({
                 src: this.src
             }, function (data) {
-                console.log(window.aa = data);
                 _this.naturalHeight = data.naturalHeight;
                 _this.naturalWidth = data.naturalWidth;
                 _this.state.loaded = true;
@@ -526,7 +525,7 @@ var Lazy = function () {
                 if (item.performance.loadEnd) {
                     list.push({
                         src: item.src,
-                        timing: (item.performance.loadEnd - item.performance.loadStart) / 1000
+                        time: (item.performance.loadEnd - item.performance.loadStart) / 1000
                     });
                 }
             });