实战解决小程序图片加载问题

相较于web端或者H5开发，小程序本身在性能上弱很多（但用户体验上要好）。以前开发时服务器性能过剩在那里帮你撑着脸面，你对自己的代码质量和编程习惯心里没数，小程序就是一面镜子。
废话少说，要解决的问题是，小程序加载图片闪烁，渐渐出现，出现的很慢等等效果不尽人意的体验。

如果你的小程序本身只用加载很少的图片，那么其实问题不大。如果是像购物APP那样或者是一款有图片列表的应用，那么以下方案肯定能帮到你。

1.从源头把控，所有的图片放到云存储上（或者用小程序开发工具的素材管理），后台对图片进行可接受范围内的最大限度压缩，图片宽高不用太大，大概预留你图片容器的1.5倍就行了，除非你做图片放大镜功能，否则小程序上加载2倍图意义不大，反正图片也不可以被长按，被放大。

2.官方文档上写着图片image上自带lazy-load(懒加载),默认是关闭的，你把它开启，但是要记得它只在两个固定容器(page或scroll-view)下才有用。
以上方案针对下滑加载更多列表的应用，类似下图这个，是有一定效果的：

3.做完上述两步，如果你发现就算你一屏就加载4张图片，每张才30k以内还是一张一张的闪现，尤其在安卓上（嘿嘿，你以为安卓会一直输下去？），但是下滑加载更多时下面的图片显示体验却意外顺滑（官方的lazy-load生效了），那么就继续看。
就算首屏就加载四张小图，图片还没有全都刷的一下出来那种顺畅体验（看看美团外卖小程序那顺畅，带劲）。
那么我们就做一个整体加载，我们把图片列表装在一个容器里，把容器的透明度设置为0，当我们请求接口并判断图片加载完成之后，我们再让容器渐显。这时候效果就是四张图片全部刷的出来了，看下面示例图（tab切换时更新了列表数据）：

一个思路完善但代码简要的例子：
wxml上根据showList来控制加载时显示动画，完成显示容器；

<!-- loading动画 -->
 <block wx:if="{
    {!showList}}">
    <view class='list-loading'>
      <image src='loading.gif'></image><