Awesome
微信小程序 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()
})