页面加载占位_小程序开发日记 图片懒加载

图片来自网络

做应用开发时，我们经常会用到一些图片文件。

当图片大小不可预测时(如网络图片)，通常的做法是在图片加载这段时间里，采用本地的一张默认图片代替之，直到成功加载完成才替换成真正的图片。

有些开发框架的图片组件会自带上述能力，我们只需要使用即可。

那我们来看看小程序对此能力的支撑情况吧。

微信小程序image组件属性

如上图所示，微信小程序的image组件的lazy-load属性可以帮助我们实现图片懒加载，那么我们的占位图又如何实现呢？

首先我们利用image组件的bindload、binderror属性，分别给它加上一个回调函数。

其次在程序中增加一个标志位，分别在图片加载完成回调和加载失败回调中重置为相应的值，此标志位用于图片加载过程中(以及加载失败时)，显示本地占位图片。

Page({