uni-app ，H5实现lazyload

背景：

uni-app image组件的lazyload 不支持H5端。 这个对于有图片的长列表来说，体验很差。特别是有更多数据加载时，由于浏览器同一域名并发请求有限制，会阻塞后面的请求。因此作者使用vue-lazyload暂时解决下浏览器端的图片懒加载问题。

步骤：

安装vue-lazyload组件 。

1. 地址：https://www.npmjs.com/package/vue-lazyload
2. gihub ： https://github.com/hilongjw/vue-lazyload
3. 使用npm安装 ，`npm -i vue-lazyload -S

引入组件

在main.js中引入，代码如下

import VueLazyload from 'vue-lazyload'  
Vue.use(VueLazyload)

用法

图片方式

<block v-for="(item,index) in list" :key="index">  
<!-- #ifdef APP-PLUS -->  
<image  :lazy-load="true" :src="item.img"></image>  
<!-- #endif -->  
<!-- #ifdef H5 -->  
<img  v-lazy="item.img">  
<!-- #endif -->  
</block>  

背景图方式

<block v-for="(item,index) in list" :key="index">  
<!-- #ifdef APP-PLUS -->  
<image  :lazy-load="true" :src="item.img"></image>  
<!-- #endif -->  
<!-- #ifdef H5 -->  
<view  v-lazy:background-image="{loading:'/static/loading.png',error:'/static/error.png',src:item.img}"></view>  
<!-- #endif -->  
</block>  

自定义样式

img[lazy=loading] {  
    /*加载中*/  
}  
img[lazy=error] {  
    /*加载失败*/  
}  
img[lazy=loaded] {  
    /*加载完成*/  
}

更多用法请参考文档