我们在用 uni-app 开发微信小程序时,一般都离不开图片组件 image,如果图片多的时候,为了提升用户体验,都会做懒加载处理。那么,我们应该如何实现图片懒加载呢?

通过查看 uni-app 相关文档微信小程序相关文档,有如下属性:

属性名类型默认值说明
lazy-loadBooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载

因此,我们只需在 image 属性中增加该属性就可以了,具体如下:

<image lazy-load :src="item.pic" />

小伙伴们可能会感觉加入 lazy-load 属性后,好像懒加载没有生效。其实这只是个错觉,因为按文档所述,小程序会提前加载上下三屏的图片,导致无法感知懒加载的存在。其实 image 组件还有个如下隐藏的属性,官方文档里面没有标出来:

属性名类型默认值说明
lazy-load-marginNumber图片懒加载屏数阈值,在即将进入设置的屏数才开始加载

为了能更清楚的确认懒加载是否生效,我们通过将 lazy-load-margin 设置为 0,再看效果,代码如下:

<image lazy-load :lazy-load-margin="0" :src="item.pic" />

通过设置 lazy-load-margin,并结合 微信开发者工具 调试器中的 Network,我们可以很清楚的观察到懒加载的效果了。另外,可以通过 lazy-load-margin 灵活设置懒加载屏数阈值。

注意:图片懒加载只针对 pagescroll-view 下的 image 有效。

如果觉得我的文章对你有用,请点个赞