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'}"