在开发小程序过程中，图片资源的加载往往是比较耗费流量和加载时间的操作。而如果页面中有大量的图片，用户将需要付出更多的时间和流量等待页面加载完成。为了提高小程序的用户体验，我们可以采用图片懒加载的优化技术。
什么是图片懒加载
图片懒加载是一种延迟加载图片的技术，即只有当用户即将进入可视区域时才加载图片。这样可以减少首次页面加载时的图片资源获取量，降低用户等待时间和流量消耗。
实现图片懒加载的步骤
1. 获取图片节点信息
首先，我们需要获取每个图片节点在页面中的位置信息。可以通过小程序的createSelectorQuery API获取到图片节点的位置信息。
// 小程序中的页面对象
const page = getCurrentPages()[getCurrentPages().length - 1];
// 获取图片节点的位置信息
const query = wx.createSelectorQuery().in(page);
query.selectAll('.lazy-img').boundingClientRect((rects) => {
// rects为一个数组，包含每个图片节点的位置信息
}).exec();
2. 判断图片是否处于可视区域
当用户滚动页面时，我们需要判断图片是否处于当前可视区域内。
// 判断图片是否处于可视区域
function isInView(rect) {
const windowHeight = wx.getSystemInfoSync().windowHeight;
const scrollTop = wx.pageScrollToSync().scrollTop;
const offset = 10; // 为了更好的用户体验，可以提前加载离当前可视区域较近的几张图片
return rect.top <= windowHeight + scrollTop + offset && rect.bottom >= scrollTop - offset;
}
3. 懒加载图片
当图片进入可视区域时，我们将其data-src中保存的真实图片地址赋值给src属性，实现图片的懒加载。
<!-- wxml -->
<image class="lazy-img" data-src="真实图片地址"></image>
// js
const rects = []; // 存储图片节点的位置信息
// 遍历所有图片节点
rects.forEach((rect) => {
if (isInView(rect)) {
// 懒加载图片
const imgNode = page.selectComponent('.lazy-img');
imgNode.src = imgNode.dataset.src;
}
});
4. 监听页面滚动事件
为了实时监听用户页面的滚动，我们需要在页面中监听onPageScroll事件，并在事件处理函数中判断是否需要加载图片。
// 页面中监听滚动事件
onPageScroll(event) {
rects.forEach((rect) => {
if (isInView(rect)) {
// 懒加载图片
const imgNode = page.selectComponent('.lazy-img');
imgNode.src = imgNode.dataset.src;
}
});
},
5. 图片占位和加载动画
为了提高用户体验，我们可以在图片未加载完成前，使用一张占位图代替，并为图片加载动画，当图片加载完成后再显示真实图片。
<!-- wxml -->
<image class="lazy-img" data-src="真实图片地址" src="占位图地址" bindload="onImageLoad"></image>
// js，监听页面图片加载完成事件
onImageLoad(event) {
const imgNode = page.selectComponent('.lazy-img');
if (imgNode.src !== imgNode.dataset.src) {
// 图片加载完成后再显示图片
imgNode.srin = imgNode.dataset.src;
}
},
总结
通过实现小程序中的图片懒加载优化，我们可以减少页面的加载时间和流量消耗，提高用户体验。上述实现方式只是基础版的图片懒加载，还可以根据具体业务场景进一步优化，比如按需加载图片、图片预加载等。希望本文能给你在小程序开发中的图片资源加载优化带来一些帮助。
本文来自极简博客，作者：魔法少女，转载请注明原文链接：如何实现小程序中的图片懒加载优化
