小程序开发之图片预加载

小程序图片预加载，小程序不像web的html，很多属性小程序没体现出来，比如图片预加载
我们现在来看看小程序中的图片预加载
这个是wxml

<view class="img-content">
    <navigator class="list flex-box" wx:for="{{films}}" url="">
        <view class="list-img">
          <image class="img" src="{{item.loaded?item.img:'/image/poading.gif'}}" bindload="imageOnLoad" id="{{item.href_id}}" binderror="imageOnLoadError"></image>
        
        </view>
        <view class="list-main flex-btn">
            <view class="list-title list-brief">
                <text>{{item.title}}</text>
            </view>
            <view class="list-brief">{{item.introduce}}</view>
            <view class="list-brief" style='margin-top:10rpx;'>作者：{{item.author}}<text style='float:right'>{{item.browsing_volume}}阅读</text></view>
        </view>
    </navigator>
</view>

我们现在来看看js是怎么处理的

imageOnLoad(ev) {
    var that = this;
    var films = that.data.films;
    var href_id = ev.currentTarget.id;
    for (var i = 0; i < films.length; i++) {
      if (films[i].href_id == href_id) {
        films[i].loaded = true
      }
    }
    that.setData({
      films: films
    })
  },
  imageOnLoadError(ev) {
    var that = this;
    var imgUrl = '/frontend/web/qsw/952421561722607.jpg';
    var films = that.data.films;
    var href_id = ev.currentTarget.id;
    for (var i = 0; i < films.length; i++) {
      if (films[i].href_id == href_id) {
        films[i].img = imgUrl
      }
    }
    that.setData({
      films: films
    })
  }

实现的原理：
1.我们给一张初始化的图片loading，然后去监听图片是否加载完成如果图片加载完成我们就把他换成已经加载的目标图片
2.我们这些数据都是数组。我们给他一个值去判断图片是否已经加载好了 films[i].loaded = true，等全部图片加载好就重新渲染一下，这样我们去可以去实现图片的预加载

看实例