vue图片懒加载插件vue-lazyload

前言：当页面的图片数量过多，或者用户当前网络不佳的情况下，我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

实现方法：使用vue的图片懒加载插件vue-lazyload

实现步骤：

1. 安装vue-lazyload插件

npm install vue-lazyload --save-dev

2. 在入口文件main.js中引入并使用

// 引入
import VueLazyload from 'vue-lazyload'
// 使用（以下两种方式可选）：
// 1.直接使用
Vue.use(VueLazyload)
// 2.添加自定义选项
Vue.use(VueLazyload, {
  preLoad: 3,
  error: require('@/assets/img/error.png'),
  loading: require('@/assets/img/load.png'),
  attempt: 1
})

3. 在template模板中使用（将 :src 属性直接改为v-lazy）

<img v-lazy="imgItem" />

参数选项说明：

key	description	default
preLoad	提前加载高度（数字 1 表示 1 屏的高度）	1.3
error	图片加载失败时显示的图片	'data-src'
loading	图片加载状态下显示的图片	'data-src'
attempt	加载错误后最大尝试次数	3
listenEvents	监听事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
adapter	动态修改元素属性	{ }
filter	图片监听过滤	{ }
lazyComponent	组件懒加载	false
dispatchEvent	触发元素状态监听事件（error, loaded, rendered）	false