前言

当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。

使用

1 安装

npm install vue-lazyload --save-dev

2 引入及调用
main.js 入口文件中调用

//引入这个懒加载插件
import VueLazyLoad from 'vue-lazyload'
// 添加VueLazyload 选项,此选项为基本选项。
Vue.use(VueLazyLoad,{
    error: require('common/image/error.png'),
    loading: require('common/image/loading.png')
})

3 使用
在入口文件添加后，直把 img 里的:src 修改成 v-lazy

//原
<img :src="'/static/img/' + item.imgUrl" >
//现
<img v-lazy="'/static/img/' + item.imgUrl" >

案例

demo:案例展示

插件地址

插件地址：npm