Share a streamlined image lazyload plugin example

$ npm install vue-lazyload --save

//

import Vue from 'vue'
// import VueLazyload
import VueLazyload from 'vue-lazyload'

//use custom directive
(VueLazyload)

// use options
(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/',
 loading: 'dist/',
 attempt: 1
})

new Vue({
 el: 'body',
})

<!---->
<script>
export default {
 data () {
  return {
   list: [
    'your_images_url', 
    'your_images_url', 
    // you can customer any image's placeholder while loading or load failed
    {
     src: 'your_images_url.png',
     error: '',
     loading: ''
    }
   ]
  }
 }
}
</script>

<template>
 <div class="img-list">
  <ul >
   <li v-for="img in list">
    <img v-lazy="img">
   </li>
  </ul>
 </div>
</template>

<style>
 img[lazy=loading] {
  /*your style here*/
 }
 img[lazy=error] {
  /*your style here*/
 },
 img[lazy=loaded] {
  /*your style here*/
 }
 /*
 or background-image
 */
 .yourclass[lazy=loading] {
  /*your style here*/
 }
 .yourclass[lazy=error] {
  /*your style here*/
 },
 .yourclass[lazy=loaded] {
  /*your style here*/
 }
</style>