我们在用 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 灵活设置懒加载屏数阈值。

注意：图片懒加载只针对 page 与 scroll-view 下的 image 有效。

版权属于：瞭月

本文链接：https://www.lervor.com/archives/261/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。

© 允许规范转载
如果觉得我的文章对你有用，请点个赞