微信小程序 wepyjs 第三方图片预加载组件

说明

wxapp-img-loader只能用于小程序原生开发，因此需要一个适用于wepy使用的组件。

使用

安装组件

npm install wepy-img-loader --save

引入组件

// index.wpy
<template>
    <imgloader />
</template>
<script>
    import wepy from 'wepy';
    import ImgLoader from 'wepy-img-loader';

    export default class Index extends wepy.page {
        components = {
            imgloader: ImgLoader
        }
    }
</script>

调用方法

//缩略图 80x50 3KB
const imgUrlThumbnail = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'
//原图 3200x2000 1.6MB
const imgUrlOriginal = 'http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'

this.msg = '大图正在拼命加载...'
this.imgUrl = imgUrlThumbnail

this.$invoke('imgloader', 'load', imgUrlOriginal, (err, data) => {
    this.msg = '大图加载完成~'
    if (!err) {
    this.imgUrl = data.src
    }
    this.$apply()
})

Thanks

wepy

wxapp-img-loader