uni-app H5实现lazyload图片懒加载

使用npm安装 vue-lazyload 组件

npm -i vue-lazyload -S

使用方法 在 components 文件夹下创建一个组件 myImage.vue

<template>
	// 图片方式
	<!-- #ifdef APP-PLUS||MP-WEIXIN --> 
	<image  :lazy-load="true" :src="imgpath" 
	:style='{width:imgwidth,height:imgheight}'
	></image>  
	<!-- #endif -->  
	<!-- #ifdef H5 -->  
	<img  v-lazy="imgpath" >  
	<!-- #endif -->  
</block>  
</template>

<script>
	import Vue from 'vue'
	import VueLazyload from 'vue-lazyload'  
	Vue.use(VueLazyload)
	export default{
		// props:['imgpath']
		props:{
			imgpath:{
				type:String
			},
			imgwidth:{
				type:String,
				default:'100%'
			},
			imgheight:{
				type:String,
				default:'100%'
			}
		}
		
		
	}
</script>

<style>
	img{width: 100%;}
	/* .imgBox{width: 100%;height: 100%;} */
	/* .imageStyle{width: 100%!important;height: 100%!important;;display: block;} */
	img[lazy=loading] {  
	    /*加载中*/  
	}  
	img[lazy=error] {  
	    /*加载失败*/  
	}  
	img[lazy=loaded] {  
	    /*加载完成*/  
	}
</style>

// 背景图方式
		<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 -->  

在main.js全局中注册

import myImage from './components/myImage.vue'
Vue.component('my-image',myImage)

使用方法

<my-image :imgpath="imgUrl+item.content[0].img"></my-image>