Lazyload 图片懒加载

在图片接近可见区域时加载图片，并支持占位图和加载结果事件。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 懒加载图片 -->
<fui-lazyload src="https://example.com/image.png" :width="320" :height="320" />

请将示例地址替换为实际图片地址。

属性

尺寸和间距的单位为 rpx。

属性	类型	说明	官网默认值
src	String	图片地址	-
width	Number / String	图片宽度，-1 表示 100%	320
height	Number / String	图片高度，0 或 -1 表示自动	320
radius	Number / String	圆角	0
placeholder	String	占位图片地址	-
background	String	占位背景色	#EEEEEE
mode	String	图片裁剪模式，使用 uni-app image 的 mode 值	widthFix
webp	Boolean	是否支持网络 WebP 图片	false
draggable	Boolean	是否允许拖动图片	true
marginTop	Number / String	上外边距	0
marginRight	Number / String	右外边距	0
marginBottom	Number / String	下外边距	0
marginLeft	Number / String	左外边距	0
param	Number / String	回调携带的自定义参数	0

事件

事件	说明	回调参数
click	点击图片时触发	{ param }
load	图片加载成功时触发	{ param, detail }，detail 包含图片宽高
error	图片加载失败时触发	{ param, detail }，detail 包含错误信息

插槽

插槽	说明
default	显示在图片上的绝对定位内容

平台说明

webp 对应微信小程序 2.9.0 以上的网络图片能力；draggable 对应 H5 3.1.1 以上及 App iOS 15 以上平台。