ES5
利用ES5实现多图预加载，可以通过计数器判断有多少图片加载完成。
var count = 0, // 计数器
imgs = [];
/*
* （Array）source 图片url
* （Fun）cb 回调
*/
function preLoadImg(source, cb) {
source.forEach(function(url, i) {
imgs[i] = new Image();
imgs[i].onload = function() {
if(++count === source.length) {
cb && cb();
}
}
imgs.src = url;
})
}
ES6
ES6原生提供了Promise对象，接下来用Promise改写上面的代码。
由于es6 promise原声兼容性问题可以 引入如下cdn库
http://cdn.bootcss.com/es6-promise/4.1.0/es6-promise.auto.min.js
// 预处理图片
function preLoadImg(source){
let pr = [];
source.forEach(url => {// 预加载图片
let p = loadImage(url)
.then(img => this.images.push(img))
.catch(err => console.log(err))
pr.push(p);
})
// 图片全部加载完
Promise.all(pr)
.then(() => {
// do sth
});
}
// 预加载图片
function loadImage(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
})
}
