小程序图片预加载

1.ImgageLoader.js

let base = 0;
let Img = function (src) {
  this.src = src;
  this.status = false;
  this.fail = false;
}

let loop = (o, res) => {
  let tem = Object.keys(o);
  tem.map(v => {
    if (typeof o[v] === 'object') {
      loop(o[v], res);
    } else {
      if (v === 'BASE') {
        base = o[v];
      } else {
        res.push(o[v]);
      }
    }
  });
}

function ImageLoader(obj) {
  let arr = []; if (obj.loading) {
    this.loadingcallback = obj.loading;
  }
  if (obj.loaded) {
    this.loadedcallback = obj.loaded;
  }

  if (obj.base) {
    base = obj.base
  }
  this.insert = (item) => {
    arr.push(item);
  };

  this.init = (o) => {
    let res = [];
    loop(o, res);
    console.log(res)
    res.map((v) => {
      this.insert(new Img(v));
    });
    this.load();
  };

  this.load = () => {
    this.start = (new Date).getTime();
    arr.map((v) => {
      let src = base ? base + v.src : v.src;
      wx.getImageInfo({
        src: src,
        success: res => {
          v.status = true;
        },
        fail: err => {
          v.fail = true;
        }
      })
    });
    let timer = setInterval(() => {
      let status = this.isLoaded();
      if (status) {
        clearTimeout(timer);
      }
    }, 200);

    setTimeout(() => {
      clearTimeout(timer);
    }, 60000);
  };

  this.isLoaded = () => {
    let status = true,
      count = 0,
      fail = 0;
    arr.map((v) => {
      if (!v.status) {
        status = false;
      } else {
        count += 1;
      }
      if (v.fail) {
        status = true;
        fail += 1;
      }
    });
    if (status) {
      if (this.loadedcallback) {
        this.loadedcallback({
          status: true,
          timecost: (new Date).getTime() - this.start,
          success: count,
          fail: fail,
          totalcount: arr.length
        })
      }
    } else {
      if (this.loadingcallback) {
        this.loadingcallback({
          status: false,
          percent: count / arr.length
        });
      }
    }
    return status;
  };
  if (obj.source) {
    this.init(obj.source);
  }
}
module.exports = ImageLoader;

2.ImageSource.js 需要进行预加载的图片

module.exports = {
  "BASE": "https://.....", //资源路径
  "imageList": [
    "game.png",
    "game_0.png",
    "game_1.png",
    "game_2.png",
    "game_3.png",
    "game_4.png",
    "game_5.png",
    "game_6.png",
    "game_7.png",
  ],
  "index":[
   "p_55.png",
    "p_1.png",
    "p_49.png",
    "p_50.png",
    "p_72.png",
    "p_74.png",
    "p_78.png",
     "p_bj1.png",
    "p_58.png",
  ]
}

3.使用

const ImageSource = require('../../ImageSource.js');
const ImageLoader = require('../../utils/ImageLoader.js');

var loader=new ImageLoader({
  base: ImageSource.BASE ,
  source: ImageSource.imageList,
  loading: res => {
    // 可以做进度条动画
    console.log(res);
  },
  loaded: res => {
    // 可以加载完毕动画
    console.log(res);
  }
});