img onload를promise 규범으로 봉함

1363 단어

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

좋은 웹페이지 즐겨찾기