微信小程序中高清图片替换加载策略

---

前言

随着微信的不断发展，微信小程序凭借着它用户基数大，无下载安装等优点开始逐渐替代传统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：励志做一个优秀的程序员！