在郑州小程序开发中，懒加载（Lazy Load）是一种优化性能的技术，通过延迟加载非关键资源（如图片、列表数据、页面组件等），减少首屏加载时间，提升用户体验。以下是针对不同场景的懒加载实现方案及代码示例：

一、图片懒加载：延迟加载可视区域外的图片

1. 使用小程序原生 lazy-load 属性（推荐）

小程序 image 组件原生支持 lazy-load 属性，仅当图片进入或即将进入可视区域时加载：

适用场景：长列表中的图片、非首屏图片。

2. 自定义实现（基于滚动监听）

若需更精细控制（如提前加载下一页图片），可通过监听滚动事件结合 IntersectionObserver 实现。

关键点：使用占位图（placeholder.png）提升用户体验。

二、列表懒加载：分页加载数据

1. 滚动到底部触发加载（上拉加载更多）

通过监听页面滚动事件，结合 onReachBottom 生命周期实现分页。

2. 虚拟列表（高性能长列表）

当数据量极大（如1000+条）时，使用虚拟列表仅渲染可视区域内的元素。

核心思路：通过计算可视区域高度和滚动位置，动态渲染当前窗口内的数据

三、组件懒加载：动态渲染非首屏组件

1. 条件渲染（wx:if vs hidden）

wx:if：动态创建或销毁组件，适合低频切换的场景（如Tab页）。

hidden：仅控制显示/隐藏，组件始终存在，适合高频切换的场景。

2. 分包预加载

通过小程序分包机制，提前加载非首屏分包。

四、骨架屏：提升懒加载用户体验

在资源加载前显示骨架屏，避免页面空白。

五、总结与实践

场景 方案 优化点

图片懒加载 lazy-load 或 IntersectionObserver 使用占位图，提前加载下一页图片

列表分页 onReachBottom + 分页API 添加加载状态提示，避免重复请求

长列表（1000+） 虚拟列表 仅渲染可视区域元素，减少DOM节点数

非首屏组件 wx:if + 条件渲染 结合骨架屏提升用户体验

分包预加载 preloadRule 根据用户行为预加载可能访问的分包

通用建议：

优先使用原生懒加载：如图片的 lazy-load 属性，性能佳。

合理设置分页大小：每页数据量建议20-50条，平衡加载速度和交互流畅度。

监控性能：通过小程序开发者工具的 Audits 面板分析懒加载效果。

兼容性处理：低版本基础库（如<2.9.0）不支持 lazy-load，需降级处理。

通过以上方案，可显著提升小程序在弱网环境下的加载速度和用户体验。