分享一个精简的vue.js 图片lazyload插件实例

$ npm install vue-lazyload --save

//main.jsimport Vue from 'vue'// import VueLazyloadimport VueLazyload from 'vue-lazyload'//use custom directiveVue.use(VueLazyload)// use optionsVue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1})new Vue({ el: 'body',})

<!--your.vue--><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: 'another-error.png',     loading: 'another-loading-spin.svg'    }   ]  } }}</script><template> <div class="img-list">  <ul id="container">   <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>