Vue-lazyload 的使用

Vue 项目使用 Vue-lazyload 做图片懒加载。本文在 Vue-lazyloadApi 文档基础上进行了简要的总结和归纳。

下载

下载 Vue-lazyload 的包
NPM包

1
npm install vue-lazyload --save


引入

在项目 main.js中通过 import 引入

1
2
3
import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'


配置属性

1
2
3
4
5
6
Vue.use( VueLazyload, {
preLoad: 1.3,
error: require('@/assets/loding@3x.png'),
loading: require('@/assets/loding@3x.png'),
attempt: 1
})


官方 Api

属性 描述 默认 选项
preLoad 预加载高度的比例 1.3 Number
error 图片加载失败后 'data-src' String
loading 图像正在加载时 'data-src' String
attempt 尝试次数 3 Number
listenEvents 需要监听的事件 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] 所需监听的事件
adapter 动态修改元素的属性 { } 元素适配器
filter 图像的 src 过滤器 { } 图像 url 过滤器
lazyComponent lazyload 组件 false