微信小程序image加载成功前显示默认占位图
在微信小程序中,我们使用Image
组件来展示图片,图片源可以是本地资源,也可以是服务器资源。但是为了内容的动态展示,我们绝大多数情况下,会使用服务器资源来展现作为image
的图片源。既然是服务器资源,那么就需要依赖于网络的快慢,如果在网络慢的情况下,image
加载图片的过程可能会非常慢,所以在加载图片的过程中,如果不做处理,会出现一片空白的情况,直到图片加载完成,这是非常差的用户体验。
为了提高用户体验度,我们可以在图片加载完成之前,预先展示一张本地的默认占位图片,而不是显示空白。
小程序的image
组件没有提供默认图片的属性,需要我们自己实现这个功能。
实现原理
微信小程序的image
组件有两个属性:
属性名 | 类型 | 说明 |
---|---|---|
binderror | HandleEvent | 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} |
bindload | HandleEvent | 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |
我们可以实现这两个事件:
- 实现
bindload
,在图片未加载完成时,显示占位图,一旦加载完成,马上隐藏占位图,显示真正的业务图片 - 实现
binderror
,在图片加载错误时,显示占位图。
具体实现
新建一个小程序项目
打开微信开发者工具,新建一个小程序项目Demo
,删除无用代码
自定义组件
在实际开发中,在多个地方都会用到image
组件,如果在每个使用的地方都去实现一遍占位图的功能,不仅会增加代码量,而且也增加维护量,所以,我们可以把这些逻辑,封装为一个自定义组件,这里我们取名为image-loader
,然后任何用到的地方,直接用image-loader
去代替image
就可以了。
新建image-loader
使用微信开发工具新建一个自定义组件,并位于项目的目录components
中,这个大家使用过微信开发工具的肯定都会操作,这里就不在赘述。然后找到一张占位图,放到项目的images
目录下,完成之后
现在项目的目录结构:
$ tree
.
├── app.js
├── app.json
├── app.wxss
├── components
│ ├── image-loader.js
│ ├── image-loader.json
│ ├── image-loader.wxml
│ └── image-loader.wxss
├── images
│ └── placeholder800x400.png
├── pages
│ └── index
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
└── project.config.json
复制代码
实现image-loader
我们在image-loader
中,加入两个image
,一个image
用于加载默认图片,一个image
用于加载真正的图片。为了描述方便,我们把这两个image
称为image-default
和image-real
在初始化的时候,我们显示的是image-default
图片,同时,image-real
也会一起加载,只不过,会通过css
属性控制image-real
不显示:
.before-load {width: 0;height: 0;opacity: 0;
}
复制代码
然后给image-real
实现bindload
和binderror
,在加载完成并成功后,把image-default
的width
和height
都置为空,这样image-default
就不会再显示,同时让image-real
的widhth
和height
恢复原始值,并把opcity
置为1
。
下面贴出所有代码
image-loader.js
/*** 图片预加载组件*/
Component({properties: {//默认图片defaultImage: String,//原始图片originalImage: String,width: String,height: String,//图片剪裁mode,同Image组件的modemode: String},data: {finishLoadFlag: false},methods: {finishLoad: function (e) {this.setData({finishLoadFlag: true})}}
})
复制代码
image-loader.jsong
{"component": true,"usingComponents": {}
}
复制代码
image-loader.wxml
<image wx:if='{{!finishLoadFlag}}' mode='{{mode}}' src='{{defaultImage}}' style='{{width ? "width:" + width : ""}};{{height ? "height:" + height : ""}}' />
<image mode='{{mode}}' class='{{finishLoadFlag ? "" : "before-load"}}' src='{{originalImage}}' bindload='finishLoad' style='{{finishLoadFlag && width ? "width:" + width : ""}};{{finishLoadFlag && height ? "height:" + height : ""}}' />
复制代码
image-loader.wxss
.before-load {width: 0;height: 0;opacity: 0;
}
复制代码
注意:我这里为了简化,只实现了
image
的bindload
而未实现binderror
。
测试
最后,我们修改pages/index
页面代码测试一下
- 启用插件
index.json
{"usingComponents": {"image-loader": "/components/image-loader"}
}
复制代码
- 测试代码:
index.wxml
<image-loader default-image='../images/placeholder800x400.png' mode='widthFix' original-image='https://www.neware.shop/demo/mobile/api/v1/public/image/download/201809051000165950' width="400rpx" height="200rpx" />
复制代码
源码
完整的组件源码我放在了 Github
上,大家可以去查看:wx-mini-image-preload
微信小程序image加载成功前显示默认占位图相关推荐
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 微信小程序分包加载,分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
- 微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多 组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
- 微信小程序,Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试?微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载 在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
- 微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
- 微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题 在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题 问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
- 微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
- 微信小程序怎么取mysql_微信小程序如何加载数据库真实数据?
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
- 微信小程序 - 图像加载时渐隐淡入效果(image)
前言 由于微信小程序图片组件加载成功后,会突然显示出来比较生硬,所以需要对其进行动画修饰. 我们可以利用简单的动画对其进行修饰,当图片加载完毕后应用 自己设置一个渐隐的过渡效果时间,如下图所示: 解决 ...
最新文章
- 内存或磁盘空间不足,Microsoft Office Excel 无法再次打开或保存任何文档。 [问题点数:20分,结帖人wenyang2004]...
- mcq 队列_人工智能| AI解决问题| 才能问题解答(MCQ)| 套装1
- android 蓝牙 多线程,Android蓝牙示例
- EXCEL同一个界面下打开两个表格比较
- android 能否控制drawabletop的大小_V038小程序能否逐步完全取代APP?
- sql sever 插入数据
- wget 覆盖文件下载的技巧,绝对有效
- mysql计算增长率
- vnc远程控制软件配置,vnc远程控制软件怎么配置的,教程详解
- 人工蜂群算法python_python实现人工蜂群算法
- 二叉树的顺序结构及实现
- 学生寝室电控系统的原理功能
- html点击按钮换css文件夹,按钮如何使用外部css样式
- 如何用手机给证件照P正装?这两个小妙招快学起来
- Android简易登陆注册逻辑
- 自动还原的Linux,PS3 Ubuntu修改分辨率重启后自动还原问题的解决
- fieldset——一个不常用的HTML标签
- 直播APP开发:直播效应,正能量的直播
- (一)第一个Python程序
- 在线教学直播中做ppt文档的在线直播(在线课常多画面直播)教程