uni

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

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

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

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

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

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

版权属于：瞭月

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

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