vue-lazyload懒加载插件的使用

1.vue-lazyload在npm上面的网址https://www.npmjs.com/package/vue-lazyload

2.安装，在vue-cli中安装

npm install vue-lazyload -D

 3.在HTML中安装

4.在vue-cli中的使用

在main.js中配置

import VueLazyload from 'vue-lazyload'

//使用懒加载组件
Vue.use(VueLazyload,{
  error: require('./assets/img/404nofind.jpg'),//当加载图片失败的时候
  loading: require('./assets/img/loading.png'),//当加载图片成功的时候
  preLoad:1
})

一些配置的参数

5.在需要的组件中使用

5.1v-lazy

  

    
  


  data(){
     return{
       list:[
         {name:require('../assets/imgs/01.jpg')},
         {name:require('../assets/imgs/02.jpg')},
         {name:require('../assets/imgs/03.jpg')},
         {name:require('../assets/imgs/04.jpg')},
         {name:require('../assets/imgs/05.jpg')},
         {name:require('../assets/imgs/06.jpg')},
         {name:require('../assets/imgs/07.jpg')},
         {name:require('../assets/imgs/08.jpg')},
         {name:require('../assets/imgs/09.jpg')},
         {name:require('../assets/imgs/010.jpg')},
       ]
     }
  },

 5.2v-lazy-container

  //data-src里面的地址是真实的地址，就是build之后在dist文件夹中的img里面的地址