微信小程序(uniapp) 图片懒加载处理_uniapp 图片懒加载

我们在用 uni-app 开发微信小程序时，一般都离不开图片组件 image，如果图片多的时候，为了提升加载效率以及用户体验，都会进行懒加载处理。

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

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

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

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

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

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

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

转载声明 ：
版权属于：瞭月
转载链接：https://www.lervor.com/archives/261/
1
2
3