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

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

| 属性名 | 类型 | 默认值 | 说明 | |-----------|---------|-------|-----------------------------| | lazy-load | Boolean | false | 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 |

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

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

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

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

为了能更清楚的确认懒加载是否生效，我们通过将 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 有效。