Lazyload 图片懒加载

概述

Lazyload 图片懒加载，增强用户体验，减少http的请求，减少服务器端压力。

支持平台

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

温馨提示

Nvue Android端需要在 list (opens new window)、waterfall (opens new window) 等专用可滚动组件内使用时才有特定效果。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiLazyload from "@/components/firstui/fui-lazyload/fui-lazyload.vue"
export default {
	components:{
		fuiLazyload
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 src 属性设置网络图片路径。

<fui-lazyload src="https://res.firstui.cn/static/images/common/img_logo.png"></fui-lazyload>

Slots

插槽名称	说明
default	显示在图片上的absolute定位元素

Props

属性名	类型	说明	默认值	平台差异说明
src	String	图片的网络地址	-	-
width	String, Number	图片宽度，单位rpx，如果设置为-1则视为100%	320	-
height	String, Number	图片高度，单位rpx，如果高度设置为0或者-1则视为auto	320	-
radius	String, Number	图片圆角值，单位rpx	0	-
placeholder	String	默认图片路径	-	-
background	String	默认背景色	#EEEEEE	-
mode	String	图片的裁剪模式，参考image (opens new window)组件mode属性	widthFix	-
webp	Boolean	webP 格式，只支持网络资源	false	微信小程序2.9.0+
draggable	Boolean	是否能拖动图片	true	H5 3.1.1+、App（iOS15+）
marginTop V1.7.0+	Number, String	margin-top值，单位rpx	0	-
marginRight V1.7.0+	Number, String	margin-right值，单位rpx	0	-
marginBottom V1.7.0+	Number, String	margin-bottom值，单位rpx	0	-
marginLeft V1.7.0+	Number, String	margin-left值，单位rpx	0	-
param	Number, String	自定义参数，随回调事件返回	0	-

Events

事件名	说明	回调参数
@click	点击图片时触发	{   param : 自定义参数 }
@load	图片加载完成时触发	{   param : 自定义参数   detail : 图片宽高 }
@error	图片加载失败时触发	{   param : 自定义参数   detail : errMsg }

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)