vue项目中懒加载图片插件vue-lazyload

vue项目中懒加载图片插件vue-lazyload

安装插件：

npm install vue-lazyload --save-dev 或者 cnpm install vue-lazyload --save-dev

main.js引入插件：

import VueLazyLoad from 'vue-lazyload'
import errorImg from './assets/img/common/error.png'
import loaderImg from './assets/img/common/loader.gif'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorImg,
  loading: loaderImg,
  attempt: 1
})

vue页面中使用方式

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

 <img  v-lazy="Item.imgUrl"/>
 

2、vue文件中需要懒加载的背景图片，v-lazy:background-image=“动态图片”

 <img  v-lazy:background-img="Item.imgUrl"/>