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>