uniapp中懒加载图片组件的封装与应用
在移动应用开发领域，图片资源的加载效率对用户体验有着至关重要的影响。过多图片同时加载不仅会消耗大量流量，还可能导致页面卡顿、加载缓慢。为解决这一问题，懒加载技术应运而生，它能让图片在即将进入可视区域时才开始加载，有效减轻页面初始加载压力。本文将基于uniapp框架，详细讲解如何封装一个功能强大的懒加载图片组件，并展示其在商品列表组件中的实际应用。
一、懒加载图片组件功能详解
懒加载图片组件的设计围绕性能优化与用户体验提升两大核心目标。性能层面，它通过精准的可视区域判断，实现图片的按需加载，避免在页面初始化阶段加载大量图片资源，从而降低服务器请求压力，提升页面响应速度；用户体验方面，组件支持丰富的过渡效果、加载失败提示以及多样化的占位图展示，确保在图片加载过程中，用户能获得流畅且直观的视觉体验。
- 初始化阶段：组件在创建时，会调用
generateUUID函数生成一个全局唯一的ID（uid），用于在页面中唯一标识该组件实例。同时，绑定滚动事件监听，为后续的可视区域判断做准备。 - 可视区域判断：利用
uni.createSelectorQuery方法，获取组件在页面中的位置信息（boundingClientRect）。该方法返回的结果包含组件的顶部坐标（top）等关键信息，通过将其与viewHeight进行比较，判断组件是否进入可视区域。当data.top - viewHeight < 0时，认为组件即将或已经进入可视区域，此时触发图片加载逻辑。 - 图片加载过程：
- 加载触发：若判断组件进入可视区域，且
imageSrc不为空，则将loadImg设置为true，正式发起图片加载请求；若imageSrc为空，则将isLoadError设为true，视为加载失败。 - 加载成功：当图片成功加载时，触发
handleImgLoad方法，将showImg设置为true，使图片在页面中显示。同时，通过setTimeout延迟50毫秒后，将showTransition设为true，激活渐变过渡动画，让图片从低透明度逐渐清晰显示，提升视觉体验。 - 加载失败：若图片加载过程中出现错误，触发
handleImgError方法，将isLoadError设置为true，此时组件会显示加载失败的占位图，告知用户图片加载异常。
- 加载触发：若判断组件进入可视区域，且
- 性能优化机制：为避免滚动事件频繁触发导致的性能问题，组件引入了
throttle函数对滚动监听函数scrollFn进行防抖处理。throttle函数会限制scrollFn在一定时间间隔（200毫秒）内最多执行一次，减少不必要的计算，确保页面滚动流畅。
核心实现代码如下：
// 防抖处理滚动事件（200ms触发一次）
scrollFn: throttle(function () {
if (that.loadImg || that.isLoadError) return;
const query = uni.createSelectorQuery().in(that);
query.select('#' + that.uid).boundingClientRect(data => {
// 当组件顶部距离可视区域顶部小于viewHeight时触发加载
if (data.top - that.viewHeight < 0) {
that.loadImg = !!that.imageSrc