img-loader.wpy

<style>
</style>
<template>
    <image wx:for="{{ imgLoadList }}" wx:key="*this" src="{{ item }}" data-src="{{ item }}" bindload="imgOnLoad" binderror="imgOnLoadError" style="width:0;height:0;opacity:0" />
</template>
<script>
    import wepy from 'wepy';

    export default class ImgLoader extends wepy.component {

        data = {
          imgLoadList: [],
          defaultCallback: function(){},
          callbacks: {},
          imgInfo: {},
        }

        methods = {
          imgOnLoad(ev) {
              let
                src = ev.currentTarget.dataset.src,
                width = ev.detail.width,
                height = ev.detail.height

              // 记录已下载图片的尺寸信息
              this.imgInfo[src] = { width, height }
              this.removeFromLoadList(src)
              this.runCallback(null, { src, width, height })
          },
          imgOnLoadError(ev) {
              let src = ev.currentTarget.dataset.src
              this.removeFromLoadList(src)
              this.runCallback('Loading failed', { src })
          }
        }

        onLoad () {
            console.log('img-loader组件加载成功~')
        }

        load(src, callback) {
          if (!src) return;

          let list = this.imgLoadList,
              imgInfo = this.imgInfo[src]

          if (callback)
              this.callbacks[src] = callback

          //已经加载成功过的，直接回调
          if (imgInfo) {
              this._runCallback(null, {
                  src: src,
                  width: imgInfo.width,
                  height: imgInfo.height
              })

          //新的未在下载队列中的
          } else if (list.indexOf(src) == -1) {
              list.push(src)
              this.imgLoadList = list
          }
          this.$apply()
        }

        /** 将图片从下载队列中移除 */
        removeFromLoadList(src) {
            let list = this.imgLoadList
            list.splice(list.indexOf(src), 1)
            this.imgLoadList = list
        }

        /** 执行回调 */
        runCallback(err, data) {
            let callback = this.callbacks[data.src] || this.defaultCallback
            callback(err, data)
            delete this.callbacks[data.src]
        }
    }
</script>