什么是渐进式加载？
渐进式加载是指将页面的内容分为多个部分，分批加载显示，以提升用户体验。在小程序中，可以通过渐进式加载来让页面快速展示基础内容，而延迟加载其他复杂或非必要的内容，同时可以给用户提供更丰富的交互。
实现渐进式加载的方法
1. 分块加载
将页面内容细分为多个不同的块，在页面初始化的时候只加载必要的块，延迟加载其他块，例如列表页中只显示少量的列表项，当用户滑动到底部时再加载更多列表项。
2. 图片延迟加载
因为图片的加载通常是页面加载速度变慢的主要原因之一，可以通过延迟加载图片的方式来提升页面加载速度。在小程序中，可以使用<image>标签的lazy-load属性来实现延迟加载。
<image src="placeholder.png" lazy-load="{{true}}"></image>
当图片进入可视区域时，才会触发加载，可以在滚动事件的处理函数中监听图片的位置，动态更新图片的src属性，实现图片的渐进式加载。
3. 分批加载数据
对于需要从服务器获取数据的场景，可以将数据分为多个批次进行加载，先请求并展示第一批数据，当用户滚动到底部时再请求并展示下一批数据。
在小程序中，可以通过监听页面的onReachBottom事件，在事件的处理函数中，判断是否已经展示了所有数据，如果没有，则向服务器请求下一批数据，并将其添加到页面上。
Page({
data: {
dataList: [], // 存储数据的数组
},
onLoad: function () {
// 初始化加载第一批数据
this.loadData();
},
onReachBottom: function () {
// 滚动到底部时加载下一批数据
this.loadData();
},
loadData: function () {
// 发送请求，获取数据
// ...
// 将获取到的数据添加到dataList中
// ...
this.setData({
dataList: newDataList,
})
},
})
4. 异步加载模块
对于包含较多模块的页面，可以将一部分非核心模块进行异步加载，当页面基础内容加载完成后，再进行模块的异步加载，以提升页面的初次加载速度。
在小程序中，可以使用wx.loadSubPackage方法进行模块的异步加载。首先，在小程序的app.json文件中设置需要异步加载的模块：
{
"pages": [
"pages/index/index",
"pages/detail/detail"
],
"subpackages": [
{
"root": "asyncModule",
"pages": [
"module1/module1"
]
}
],
"window": {
"navigationBarTitleText": "小程序",
"navigationBarBackgroundColor": "#ffffff"
}
}
然后，在页面中使用wx.loadSubPackage方法加载异步模块：
const subPackage = wx.loadSubPackage({
root: 'asyncModule',
success: (res) => {
// 加载成功后的回调函数
console.log('异步模块加载成功');
},
fail: (err) => {
// 加载失败后的回调函数
console.error('异步模块加载失败', err);
}
});
在模块加载成功后，可以通过subPackage对象进行访问。
总结
通过分块加载、图片延迟加载、分批加载数据和异步加载模块等方法，可以实现小程序的渐进式加载功能，提升用户体验，尽快展示主要内容，并延迟加载复杂或非必要的部分。在使用这些方法时，需要考虑页面的具体需求和性能要求，合理选择适合的加载策略。
参考资料：
本文来自极简博客，作者：琴音袅袅，转载请注明原文链接：小程序实现渐进式加载功能的方法
