小程序图片预加载方法

第一步:在 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);

    }


  },


发布时间:2021-04-13 14:12:12

觉得有用请点个赞吧!
140 0