小程序图片预加载方法

第一步：在 image 标签里面加入 bindload="img" 事件

第二步： 在 wxml 里面头部加入下面代码

注意修改 mb 如果不需要可以删掉

     <view wx:if="{{loding}}" class="loading">
        <view class="cona">
          <view class="line">
            <progress class="progress" percent="{{step}}" stroke-width='10' backgroundColor="#643F35"
              activeColor="#FF886D"></progress>
          </view>
          <view class="txt">{{step}}%</view>
        </view>
        <view style="clear:both;"></view>
        <view class="info">
          {{step2}} MB 　| 　 86MB
        </view>
      </view>

第三步：添加 data数据

loding: true,
imgo:0

第四步：添加方法

  //加载完成后的回调
  img(e) {
    var _this = this;
    o++;
    if (e.type == 'loadedmetadata') o = o + 15;
    var len = 130;
    var p = 100 / len;
    var j = Math.round(o * p);
    var j2 = Math.round(o * p * 0.86);
    this.setData({
      step: j,
      step2: j2
    })

    console.log('循环',o)

    if (j >= 100) {
      o = 0;
      setTimeout(() => {
        _this.setData({
          loding: false
        })

      }, 800);

    }


  },