微信小程序中占位图实现

创建一个组件image-load

<!--image-load.wxml-->

<image wx:if='{{!finishLoadFlag}}' mode='{{mode}}' src='{{defaultImage}}' style='{{width ? "width:" + width : ""}};{{height ? "height:" + height : ""}}' />
<image mode='{{mode}}' class='{{finishLoadFlag ? "" : "before-load"}}' src='{{originalImage}}' bindload='finishLoad' style='{{finishLoadFlag && width ? "width:" + width : ""}};{{finishLoadFlag && height ? "height:" + height : ""}}' />

<!--json文件设置成组件"component": true,-->

<!--js-->

Component({
  properties: {
    //默认图片
    defaultImage: String,
    //原始图片
    originalImage: String,
    width: String,
    height: String,
    //图片剪裁mode，同Image组件的mode
    mode: String
  },
  data: {
    finishLoadFlag: false
  },
  methods: {
    finishLoad: function(e) {
      this.setData({
        finishLoadFlag: true
      })
    }
  }
})

加载数据前显示默认图片，加载成功后换成自己的图片

<!--wxss-->
.before-load {
  width: 0;
  height: 0;
  opacity: 0;
}

使用，在json中引入组件

  "usingComponents": {
    "image-load": "../../components/image-load/image-load"
  }
  
  <!--wxml中， default-image是默认图片，放入自己的占位图， original-image是数据图片， 一定要设置照片的宽高-->
     <image-load class="leftImg" default-image="../../../images/common/nim.png" mode='aspectFill'
     original-image="{{ item.headImage }}" width="180rpx" height="180rpx" />