微信小程序预加载图片-组件

• WXML

<image wx:if=\'{{!finishLoadFlag}}\' mode="{{loadmode?\'loadmode\':\'aspectFit\'}}" src=\'{{defaultImage}}\'  class="{{is_bg?\'\':\'image-class radius\'}}" style="height:{{height > 0?height:\'\'}}rpx">
  <text wx:if="{{text}}">{{text}}</text>
</image>
<image mode=\'{{mode}}\' class=\'pre-load {{finishLoadFlag ? "radius" : "before-load"}}\' src=\'{{originalImage}}\' bindload=\'finishLoad\' lazy-load  style="height:{{height > 0?height:\'\'}}rpx">
  <text wx:if="{{text}}">{{text}}</text>
</image>

View Code

 

<image wx:if=\'{{!finishLoadFlag}}\' mode="{{loadmode?\'loadmode\':\'aspectFit\'}}" src=\'{{defaultImage}}\'  class="{{is_bg?\'\':\'image-class radius\'}}" style="height:{{height > 0?height:\'\'}}rpx">
  <text wx:if="{{text}}">{{text}}</text>
</image>
<image mode=\'{{mode}}\' class=\'pre-load {{finishLoadFlag ? "radius" : "before-load"}}\' src=\'{{originalImage}}\' bindload=\'finishLoad\' lazy-load  style="height:{{height > 0?height:\'\'}}rpx">
  <text wx:if="{{text}}">{{text}}</text>
</image>

 

• JS

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

• WXSS

.before-load {
  width: 0;
  height: 0;
  opacity: 0;
}