Vue图片懒加载插件 - vue lazyload的简单使用

Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:

1. Be lightweight, powerful and easy to use
2. Work on any image type
3. Add loading class while image is loading
4. Supports both of Vue 1.0 and Vue 2.0

github地址: https://github.com/hilongjw/vue-lazyload

1. 下载依赖

   npm install vue-lazyload --save
   

2. 引入

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

3. 配置

   Vue.use(VueLazyload, {
       error: 'dist/error.png', // 这个是请求失败后显示的图片
       loading: 'dist/loading.gif', // 这个是加载的loading过渡效果
       try: 2 // 这个是加载图片数量
   })
   

4. 组件使用

   <template>
     <div class="lazyLoad">
       <ul id="container">
         <li v-for="img in arr">
           <img v-lazy="img.thumbnail_pic_s">
         </li>
       </ul>
     </div>
   </template>
   
   <script>
     export default({
       name:"lazyLoad",
       data(){
         return{
           arr:[]
         }
       },
       mounted:function(){
         this.$http.get('/api/data').then(res=>{
           this.arr=res.data.data;
           console.log(this.data)
         })
       },
     })
   </script>
   
   <style scoped>
       li{
         list-style: none
       }
   </style>
   

5. 如果需求中是, 不同的组件中默认的loading图不同. 可如下配置

   v-lazy:background-image="{src: item.src, error: 'http://domain.com/error.png', loading: 'http://domain.com/loading-spin.svg'}"