vue-lazyload插件

更详细的内容,请移步

使用

npm install vue-lazyload --save

//注册插件
import vueLazyload from 'vue-lazyload'
Vue.use(vueLazyload);

//在需要懒加载的图片上
<img v-lazy="imgUrl">

参数说明

注册插件的时候，是可以传入第二个配置参数的

Vue.use(vueLazyload,{})

可选的参数如下：
preLoad:类型Number,默认1.3. 表示lazyload的元素距离页面底部距离的百分比.计算值为(preload - 1).
attempt:图片加载失败后的重试次数.默认为3.
error:类型string.图片加载失败后的显示的失败图片路径.
loading:类型string.图片正在加载中显示的loading图片的路径.
listenEvents:类型array.默认['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'].即是在监听上述事件中,判断图片是否在preload的位置.如果你不想在那么多事件中判断,可以指定一个或者几个.例如如果你给这个属性只指定['touchmove'].那么scroll 屏幕不会加载图片,只有手指滑动屏幕才会加载图片.

adapter:注册img 的loading,loaded,error三个状态的回调函数,参数会暴露懒加载的img元素,可以对其进行操作.
filter: img未加载之前,解析到src 的时候注册的回调函数.可以在加载图片之前,对src进行修改.注册在filter下的所有的函数都会执行
lazyComponent:类型Boolean.是否启用懒加载组件.<lazy-component>组件中的内容只有在出现在preload的位置中才会加载组件.这个lazyloadComponent 组件有个缺点就是,组件在加载前是什么都不渲染的,这样子的话,有可能会影响布局,以及加载前到加载后的切换不好,有点突兀和生硬.挖坑(vue懒加载组件)

observer:是否启用IntersectionObserver,这个api有兼容问题
observerOptions:默认{ rootMargin: '0px', threshold: 0.1 } 主要是我对这个pai不熟,按照vue-lazyload的说法是开启之后,对很多节点的情况会优化性能.挖坑吧

还可以通过监听vue-lazyload组件的loaded事件来查看资源加载的时间

原文地址：https://segmentfault.com/a/1190000012865122