uniapp 实现图片懒加载

小程序端

<!-- lazy-load 设置是否启用图片懒加载，默认只支持小程序端 -->
<image :lazy-load="true" :src="itemData.img" mode="widthFix"></image>

H5 端

vue-lazyload github 地址：https://github.com/hilongjw/vue-lazyload

1. 安装插件

npm install vue3-lazy

2. 在项目入口文件 main.js 中注册插件

import App from './App'
import {
	createSSRApp
} from 'vue'
// #ifdef H5
import lazyPugin from 'vue3-lazy'
// #endif

export function createApp() {
	const app = createSSRApp(App)
    
	// #ifdef H5
	app.use(lazyPugin, {
		loading: './static/images/common/placeholder.png'
	})
	// #endif
    
	return {
		app
	}
}

3. 在页面中使用

<!-- lazy-load 设置是否启用图片懒加载，默认只支持小程序端 -->
<!-- #ifndef H5 -->
<image :lazy-load="true" :src="itemData.img" mode="widthFix"></image>
<!-- #endif -->
<!-- 使用 vue3-lazy 图片懒加载库的 v-lazy 指令实现 H5 端的懒加载 -->
<!-- #ifdef H5 -->
<img v-lazy="itemData.img">
<!-- #endif -->