小程序中图片预加载

首先打开https://github.com/o2team/wxapp-img-loader

1、将 img-loader 目录拷贝到你的项目中 ，我拷贝在utils目录下，一下引入路径根据你存放img-loader目录的路径做适当变换

2、在页面的 WXML 文件中添加以下代码，将组件模板引入

<import src="../../utils/img-loader/img-loader.wxml"/>   

<template is="img-loader" data="{{ imgLoadList }}"></template>

<view>

<image src="{{imgUrl}}" class='img' bindlongtap="saveImage" is="img-loader"></image>

</view>

3、在页面的 JS 文件中引入组件脚本

const ImgLoader = require('../../utils/img-loader/img-loader.js');

//以加载一张图片为例

onLoad() { //初始化图片预加载组件

    this.imgLoader = new ImgLoader(this)

    this.imgLoader.load(imgUrl, (err, data) => {

        console.log('图片加载完成', err, data.src, data.width, data.height)

})

}