把img onload封成promise规范

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;
        })
    }