如何判断所有Image已经加载完毕

发布于
2016-07-04

目前有一个需求是批量预加载大量图片，我用了new Image去循环加载，然后需要执行一个方法，但是现在没有好的方法判断

现在写的，部分无关代码去掉了，怎么确定each内的Image全部加载过了呢，新手还望赐教：

    var photo = function() {
        var photoKey    = [];
        var avatarKey   = [];
        var errorKey    = [];
        var showKey     = [];
        var tempHtml    = '';

        //Get image data
        this.getImg = function () {

            $.post('...', { company_id:'...' }, function (data) {
                if(data !== 'fail'){

                    $.each(data, function(i,n){

                        //insert Name
                        insert(n.id, n.nickname, 'name');

                        //Photo load
                        var photo = new Image();
                        photo.src = n.photo;

                        photo.onload = function (){
                            insert(n.id, n.photo, 'photo');
                            photoKey.push(n.id);
                        };

                        photo.onerror = function (){
                            errorKey.push(n.id);
                        };

                        //Avatar load
                        var avatar = new Image();
                        avatar.src = n.avatar;

                        avatar.onload = function (){
                            insert(n.id, n.avatar, 'avatar');
                            avatarKey.push(n.id);
                        };

                        avatar.onerror = function (){
                            errorKey.push(n.id);
                        }

                    });



                }else {
                    alert('预加载失败');
                }

            },'json');

        };

        //Store to local
        var insert = function (id, data, type) {
            if(type == 'photo' && data !== ""){
                //console.log('%c存储照片\n'+id+'\npath:'+data, "color:#007fff");
                localStorage['prePhoto'+id] = data
            }else if(type == 'avatar' && data !== ""){
                //console.log('%c存储头像\n'+id+'\npath:'+data, "color:#007fff");
                localStorage['preAvatar'+id] = data
            }else if(type == 'name'){
                localStorage['preName'+id] = data
            }
        };

        //Check if key is repeated
        var checkKey = function (){
            console.log('checkKey');
            $.each(photoKey, function(i,n){
                if($.inArray(n, avatarKey) !== -1){
                    showKey.push(n);
                }
            });

        };

    };

javascript

阅读 5.4k

3 个回答

✓ 已被采纳

根据您的要求，给您提三个解决办法：

办法一

function loadImg(url, cb) {
    var img = new Image();
    img.src = url;
    img.onload = cb;
}

function loadImages(urlArr, afterAllLoadedFunc) {
    var count = urlArr.length;
    var loadedCount = 0;

    for (var i = count - 1; i >= 0; i--) {
        loadImg(urlArr[i], function () {
            loadedCount += 1;
            if (count === loadedCount) {
                afterAllLoadedFunc();
            }
        });
    }
}

loadImages([
    './xx.jpg',
    './yy.jpg',
    './zz.jpg',
], function () {
    alert('all imgs have been loaded');
});

办法二

// 使用 Promise
// 兼容的话需要引入 es6-promise 库

var loadImg = function (url) {
    return new Promise(function (resolve, reject) {
        var img = new Image();
        img.src = url;
        img.onload = function () {
            resolve()  ;
        };
        img.onerror = function () {
            reject()  ;
        };
    });
};

Promise.all([
    loadImg('xxx.jpg'),
    loadImg('yyy.jpg'),
    loadImg('zzz.jpg'),
]).then(function () {
    alert('all images are loaded!')
});

办法三

// or 如果有jquery
var loadImg = function (url) {
    var defer = $.Deferred();

    var img = new Image();
    img.src = url;
    img.onload = function () {
        defer.resolve()  ;
    };
    img.onerror = function () {
        defer.reject()  ;
    };

    return defer.promise();
};

$.when(loadImg('xx.jpg'), loadImg('yy.jpg'), loadImg('zz.jpg')).then(function () {
    alert('all images are loaded!')
});