Javascript img.onload带来的问题，求解答

Question

下面的imgLength++这么写是不是有点不合理？ 在本地图片的加载不是几乎是在src设置完的瞬间就完成了，那么此时的imgLength++刚为1，tempImg.onload函数就执行了，loaded++就为1，那么此时就满足条件 执行回调了，而且下面的这段imgObj[ key ] = tempImg还没设置 就onload了 那么传过去的不就是空对象;求解答？
函数部分：
function loadImage( imgUrl, fn ) {

    //存储图像资源
    var imgObj = {};
    var tempImg;
    //记录已经加载完毕的图片数量
    var loaded = 0;
    //统计要加载的图像数量
    var imgLength = 0;
    //遍历所有url,动态创建img
    for ( var key in imgUrl) {

        imgLength++;
        //根据遍历到的url，加载图像
        tempImg = new Image();
        tempImg.onload = function(){
            loaded++;
            //当图片加载的数量大于等于要加载的数量就可以执行回调
            if ( loaded >= imgLength){  
                fn( imgObj );

            }
        };
        tempImg.src = imgUrl[ key ];
        //把当前加载的图像存储起来
        imgObj[ key ] = tempImg;
    }
}

调用部分：
loadImage({
bird: './img/bird.png',
land: './img/land.png',
}, function( imgObj ) {

            }）

Answer 1

事件的绑定是异步的，以下是在for循环执行完后执行的
tempImg.onload = function(){
loaded++;
//当图片加载的数量大于等于要加载的数量就可以执行回调
if ( loaded >= imgLength){

fn( imgObj );

        }
    };