快应用图片懒加载

<template>
    <div class="image-load" style="{{width}};height:{{height}};" onclick="handleClickImage">
        <stack>
            <div show="{{showImage}}" class="placeholder"></div>
            <image class="{{mode==='contain'?'contain':''}} {{mode==='stretch'?'stretch':''}} {{mode==='center'?'center':''}}" src="{{imageUrl}}" onerror="handleError" oncomplete="handleComplete"></image>
            <image src="./loading.gif" if="{{showLoading}}"></image>
        </stack>
    </div>
</template>
<script>
import prompt from '@system.prompt'
import network from '@system.network'
export default {
    props: {
         {
            type: [String, Number],
            default: '100%'
        },
        height: {
            type: [String, Number],
            default: '100%'
        },
        src: {
            type: String,
            default: ''
        },
        mode: {
            type: String,
            detault: ''
        },
        reload:{
            type:Number,
            default:0
        }
    },
    onInit() {
        // network.subscribe({
        //     callback:function(res){
        //         if(res.type!=='none'&&this.netType==='none'){
        //             this.handleClickImage()
        //         }
        //         this.netType = res.type
        //     }.bind(this)
        // })
        this.imageUrl = this.src
        this.$watch('reload','handlReload')
    }, 
    handlReload(newV, oldV){
        if(newV===1&&oldV===2){
            this.handleClickImage()
        }
    },
    data: {
        netType:null,
        showImage: true,
        showLoading:false,
        imageUrl:''
    },
    handleError() {
        this.showLoading = false
        prompt.showToast({
            message: '图片加载失败，请稍后再试'
        })
    },
    handleComplete(){
        this.showImage = false
        this.showLoading = false
    },
    handleClickImage(){
        if(!this.showImage) {return ''}
        const imageUrl = this.imageUrl
        this.imageUrl = ''
        this.showLoading = true
        setTimeout(()=>{
            this.imageUrl = imageUrl
        },500)
        // this.$emit('press')
    }
}
</script>
<style lang="less">
.image-load {
  display: flex;
  .placeholder{
      100%;
      height:100%;
      background-color: rgba(0,0,0,.2);
  }
  image {
     100%;
    height: 100%;
    resize-mode: cover;
  }
  .contain {
    resize-mode: contain;
  }
  .stretch {
    resize-mode: stretch;
  }
  .center {
    resize-mode: center;
  }
}
</style>