看到有人想做图片加载出来前的占位加载状态，然后我就通过测试做出这种效果，要是有更好的方法请告诉我

实现原理是通过image 中的bindload 图片加载完成触发函数来做判断图片是否加载出来。然后用一个加载中状态图来定位在图片上，通过判断显示不显示

wxml:

<block wx:for="{{images}}" wx:key="idex">
  <view class="images_a">
    <!-- 正常图 -->
    <image class="" bindload="bindload" data-id="{{index}}" src="{{item.images}}"></image>
    <!-- 遮罩图 -->
    <image wx:if="{{item.show}}"  class="images_z" src="/39184767.gif"></image>
  </view>
</block>

css:

.images_a {
  width: 100%;
  height: 320rpx;
  position: relative;
}
 
.images_a image {
  width:100%;
  height: 100%;
}
 
.images_z {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320rpx;
  z-index: 99;
}

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    images: [
      {
        images: 'http://img.daimg.com/uploads/allimg/191209/3-1912092203420-L.jpg',
      },
      {
        images: 'http://img.daimg.com/uploads/allimg/191209/3-1912091536430-L.jpg',
      },
      {
        images: 'http://img.daimg.com/uploads/allimg/191209/3-1912091541210-L.jpg',
      },
      {
        images: 'http://img.daimg.com/uploads/allimg/191209/3-1912091515470-L.jpg',
      }
    ]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
 
  },
  bindload: function (e) {
    console.log(e, "图片加载完成")
    var that = this
    var index = e.currentTarget.dataset.id
    var image = that.data.images
    console.log(image[index], "指定数据")
    image[index].show = false
    that.setData({
      images: image
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { 
    // 请求获取来数据进行处理
    var that = this
    var image = that.data.images
    for (var i = 0; i < image.length; i++) {
      image[i].show = true
    }
    that.setData({
      images: image
    })
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
});

因为没有网络请求图片，我通过模拟器中的

来减缓图片加载速度

可以通过代码片段来查看代码片段