Lazyload 懒加载 - Vant 4

⚡ Lazyload 懒加载

🎯 介绍

Lazyload 组件就像是一个聪明的"资源管家" 🏠！它能够智能地判断哪些内容需要立即加载，哪些可以稍后再说。当页面需要展示大量图片或组件时，它会像魔法师一样，只在用户即将看到时才"变出"这些内容，让页面加载速度飞起来，用户体验丝滑如德芙！

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

Lazyload 是 Vue 指令，使用前需要对指令进行注册。就像给 Vue 安装一个"智能感应器"！

import { createApp } from'vue'; import { Lazyload } from'vant'; const app = createApp(); app.use(Lazyload); // 注册时可以配置额外的选项 app.use(Lazyload, { lazyComponent: true, });

🚀 代码演示

🔧 基础用法

将 v-lazy 指令的值设置为你需要懒加载的图片，就像给图片贴上"按需显示"的标签！📸

exportdefault { setup() { return { imageList: [ 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg', ], }; }, };

🖼️ 背景图懒加载

和图片懒加载不同，背景图懒加载需要使用 v-lazy:background-image，值设置为背景图片的地址。这就像给容器穿上"智能变色龙"的外衣，需要注意的是必须声明容器高度，给它一个舞台！

🧩 组件懒加载

将需要懒加载的组件放在 lazy-component 标签中，即可实现组件懒加载。就像把组件装进"时空胶囊"，只有在需要时才会"苏醒"！

// 注册时设置`lazyComponent`选项 app.use(Lazyload, { lazyComponent: true, });

API

Options

参数	说明	类型	默认值
loading	加载时的图片	string	-
error	错误时的图片	string	-
preLoad	预加载高度的比例	number	-
attempt	尝试次数	number	3
listenEvents	监听的事件	string[]	scroll等
adapter	适配器	object	-
filter	图片 URL 过滤	object	-
lazyComponent	是否能懒加载模块	boolean	false

更多内容请参照：vue-lazyload 官方文档

常见问题

通过 CDN 引入 Vant 时，没有自动注册 Lazyload 组件？

由于 Lazyload 组件在注册时可以传入一些配置项，所以我们不会自动注册 Lazyload 组件，需要手动进行注册：

const app = Vue.createApp(); app.use(vant.Lazyload, { lazyComponent: true, });

📚 相关文档

🖼️ 媒体组件

• Image 图片 - 图片组件，懒加载的最佳搭档
• ImagePreview 图片预览 - 图片预览组件，支持懒加载优化

🚀 性能优化

• List 列表 - 列表组件，长列表性能优化的利器
• Loading 加载 - 加载组件，优化等待体验

🎨 设计组件

• Skeleton 骨架屏 - 骨架屏组件，加载状态的优雅展示
• Empty 空状态 - 空状态组件，无数据时的友好提示

🛠️ 开发指南

• Advanced Usage 进阶用法 - 进阶用法指南，组件注册详解

🔧 工具组件

• PullRefresh 下拉刷新 - 下拉刷新组件，数据更新体验