前言
随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app。但同时,微信小程序也存在着致命的缺点,微信团队为了使微信小程序免除下载安装等复杂操作,就限制微信小程序的上传大小不能超过2M,这使得微信小程序不能将用作封面或者背景的高清图储存在本地,只能通过image标签的jsonp方式去访问网络资源,这种方式的最大弊端就是可能会造成加载过程中白屏显示,极大的影响用户体验,为了解决这种缺陷,本文使用了替换加载策略
一、基本思想
通过观察微信官方文档中的image标签,可以知道image的src属性可以设置为网络链接或者本地链接,换句话说,image标签既可以加载本地图片,也可以加载网络图片,除此之外,image标签还有一个bindload属性也是本文所使用方法的关键之处。(bindload属性的作用是,当加载完当前图片即执行所绑定的函数)
替换加载策略,顾名思义就是使用高清的图片替换模糊的图片进行加载显示,那在什么时候替换呢?这种方法的优点是什么呢?
首先,小程序优先加载本地的模糊图片,由于模糊图片的大小相较于高清图片小的多,方便打包上传,并且其加载速度极快,不会有白屏显示,在完全加载成功后,使用高清图片替换模糊图片(其中高清图片存储在云端,通过网络方式进行加载)。
二、具体步骤
1.图片大小对比
其中高清图片大小为143.67kb
模糊图片大小为3.41kb
模糊图片大小只有高清图的四十分之一左右,可以说加载模糊图片所用耗时将极大的减少。
2.代码流程
在data渲染里先初始化加载本地的模糊图片。
//index.wxml
<image src="{{imgBackUrl}}" class="backPicture"></image>
//index.js
data: {
...
imgBackUrl:"../../images/back.png",//背景图片
imgTitleUrl:"../../images/title.jpg",//开头风景图片文件
imgButtonUrl:"../../images/button.jpg",//开头按钮图片
imgLoadList:[]//初始化空的高清图列表
},
同时,在wxml页面最前方初始化加载一个image标签,其中绑定的元素为data中的高清图列表,初始列表为空,且该标签的宽高都设置为0,即不会占用页面空间。(工具人作用,不作页面显示,仅仅用来判断何时加载高清图以及高清图是否加载完成)
<image wx:for="{{ imgLoadList }}" wx:key="*this" src="{{ item }}" data-src="{{ item }}" data-index="{{index}}" bindload="imgOnLoad" binderror="imgOnLoadError" style="width:0;height:0;opacity:0" />
当整个页面加载完成后,将高清图片的网络地址加载到高清图列表
const imgBackUrlOriginal="cloud://ldd-pgj55.6c64-ldd-pgj55-1304519390/backP.png"//登录界面原图
const imgTitleUrlOriginal="cloud://ldd-pgj55.6c64-ldd-pgj55-1304519390/1.jpg"//初始界面风景图原图
const imgButtonUrlOriginal="cloud://ldd-pgj55.6c64-ldd-pgj55-1304519390/initpintu_副本1.jpg"//初始界面按钮原图
...
onReady(){
this.index=0
//加载完成后模糊图全部替换为原图
this.setData({
imgLoadList:[imgBackUrlOriginal,imgTitleUrlOriginal,imgButtonUrlOriginal]
})
},
由于数据绑定原理,当imgLoadList的数值改变时,即开始渲染上面提到的image标签,当渲染完成后,执行bindload属性绑定的函数imgLoad(),完成高清图的替换,当全部替换完成后,置空作为工具人的高清图加载列表imgLoadList,使同样为工具人的image标签被删除掉(wx:for后的数组为空,则不会被渲染)。
//加载图片完后,将实际模糊图替换为高清图,并删除该图
imgOnLoad(e){
const src=e.currentTarget.dataset.src
const index=e.currentTarget.dataset.index
switch(index){
case 0:
this.setData({imgBackUrl:src})
break
case 1:
this.setData({imgTitleUrl:src})
break
case 2:
this.setData({imgButtonUrl:src})
break
}
this.index++
if(this.index>=this.data.imgLoadList.length){
this.setData({
imgLoadList:[]
})
}
},
总结
软件设计都将为提高用户体验为目标,不管是页面视觉还是功能体验,静态资源的快速加载一直是一个棘手问题,这个方法也仅仅是取巧,侧面提高用户体验,希望后续能有更为有效的快速加载方式。
PS:励志做一个优秀的程序员!