1. 安装插件

npm install vue-lazyload --save-dev

2.main.js引入插件

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:require('@/static/error.png'),
    loading:error:require('@/static/loading.png')
})
3. vue文件中

3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

<img class="item-pic" v-lazy="newItem.picUrl"/>

4.设置样式

tips:加载时可以不设置图片,使用背景颜色代替

//加载中的样式
  img[lazy=loading] {

  }
//加载错误时的样式
  img[lazy=error] {

  }
//加载后的样式
  img[lazy=loaded] {

  }

例子

img[lazy=loading]{
  transform:scaleX(0.3) scaleY(0.5);
}
img[lazy=loaded]{
  animation:appear 0.3s;
  animation-fill-mode: both;
}
@keyframes appear {
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}