qq_21532293
昏黄烛火轻摇晃
2017-11-04 14:05

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

  • canvas
  • javascript

下面的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 ) {

            })
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答