mpvue-img-load

小程序图片预加载组件,基于 mpvue 框架的重写wxapp-img-loader,更好的满足工程化,模块化,自动化的需求

使用方式

1.安装依赖

npm install mpvue-img-load

2.调用组件

<div>
  <image v-if="imgUrl" :src="imgUrl" />
  <img-load ref="imgLoad"></img-load>
</div>

  import imgLoad from 'mpvue-img-load'

  export default {
    data () {
      return {
        imgUrl: ''
      }
    },
    components: {
      imgLoad
    },
    methods: {
      loadImage () {
        // 加载缩略图 80x50 3KB
        this.imgUrl = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'
        // 原图 3200x2000 1.6MB
        const imgUrlOriginal = 'http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'
        // 同时对原图进行预加载，加载成功后再替换
        this.$refs.imgLoad.load(imgUrlOriginal, (err, data) => {
          if (!err) {
            this.imgUrl = data.src
          }
        })
      }
    }
  }

注: (1) load 方法进行图片加载，第一个参数为图片链接，第二个参数可选，为该张图片加载完成时的回调方法 (2)图片加载完成的回调方法的第一个参数为错误信息（加载成功则为 null），第二个参数为图片信息（Object 类型，包括 src、width 及 height）。 (3)demo运行效果如下图所示：