微信小程序image加载成功前显示默认占位图

最新推荐文章于 2024-08-08 20:21:46 发布

weixin_34174422

最新推荐文章于 2024-08-08 20:21:46 发布

阅读量3.1k

点赞数 1

文章标签： json 开发工具

原文链接：https://juejin.im/post/5bae3a98f265da0aff17481b

版权

本文介绍如何在微信小程序中，当Image组件加载图片时，通过自定义组件显示默认占位图以提升用户体验。文章详细阐述了实现原理，包括利用onLoad和onError事件，以及具体的实现步骤，包括新建小程序项目、创建自定义组件image-loader，并提供了相关代码示例。测试部分展示了如何在页面中应用该组件。

摘要由CSDN通过智能技术生成

在微信小程序中，我们使用Image组件来展示图片，图片源可以是本地资源，也可以是服务器资源。但是为了内容的动态展示，我们绝大多数情况下，会使用服务器资源来展现作为image的图片源。既然是服务器资源，那么就需要依赖于网络的快慢，如果在网络慢的情况下，image加载图片的过程可能会非常慢，所以在加载图片的过程中，如果不做处理，会出现一片空白的情况，直到图片加载完成，这是非常差的用户体验。

为了提高用户体验度，我们可以在图片加载完成之前，预先展示一张本地的默认占位图片，而不是显示空白。

小程序的image组件没有提供默认图片的属性，需要我们自己实现这个功能。

实现原理

微信小程序的image组件有两个属性:

属性名	类型	说明
binderror	HandleEvent	当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
bindload	HandleEvent	当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}