接下来在组件 img-loader.wxml 中通过接收到的图片队列数据，用 wx:for 指令去生成 image 组件来对图片进行加载，同时将成功及失败的回调绑定到 img-loader.js 中的方法中，最终再回调回 Page 对象中
可以看出，由于小程序里无法动态地插入模板结构，所以相对于普通网页端的组件调用，这里多出了在 WXML 文件中引入及使用模板这个步骤，而其他部分对于调用方（即Demo 页面）来说则是相似的，下面是完整的 Demo 页面的代码
<!-- demo.wxml --> <view> <image wx:if="{{ imgUrl }}" src="{{ imgUrl }}" /> </view> <button bindtap="loadImage">Click To Load Image</button> <view>{{ msg }}</view> <!-- 引入图片预加载组件 --> <import src=""/> <template is="img-loader" data="{{ imgLoadList }}"></template>
// ------ demo.js ------ //引入图片预加载组件 const ImgLoader = require('../../img-loader/img-loader.js') //缩略图 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' Page({ data: { msg: '', imgUrl: '' }, onLoad() { //初始化图片预加载组件 this.imgLoader = new ImgLoader(this) }, loadImage() { //加载缩略图 this.setData({ msg: '大图正拼命加载..', imgUrl: imgUrlThumbnail }) //同时对原图进行预加载，加载成功后再替换 this.imgLoader.load(imgUrlOriginal, (err, data) => { console.log('图片加载完成', err, data.src) this.setData({ msg: '大图加载完成~' }) if (!err) this.setData({ imgUrl: data.src }) }) } })
如果把图片加载完成的回调统一指定成 Page 对象中的方法，则可以很方便地处理多张图片的加载，这里也写了个例子，效果如下：
多张图片预加载
总的来说调用起来还算方便吧，img-loader 的组件代码略多这里就不贴出来啦，有兴趣的同学可以前往 Github 项目页面 查看，目前此组件已应用在京东购物小程序版中。