Javascript-在加载图像之前启动img onload

我的img.onload似乎在加载图像之前启动。我试图在画布上绘制图像

这是我的密码：

var tileAtlas = [ ];


function loadAtlasJSON() {  
    for (var i = 0; i < JSONpaths.length; i++) {
        loadJSON( 
            {
                fileName: JSONpaths[ i ],
                success: function( atlas ) {            
                    console.log(atlas.id);
                    addToTileAtlas( atlas );
                }
            } 
        );
    }
};


function addToTileAtlas( atlas ) {
    atlas.loaded = false;
    var img = new Image();

    img.onload = function() {
        // Logs way too soon from the previous console.log
        console.log(atlas.id);
        atlas.loaded = true;
        console.log(atlas.loaded);
    };

    // Always returns false, so onload has not fired yet
    console.log(atlas.loaded);
    img.src = atlas.src;

    // Store the image object as an "object" property
    atlas.object = img;
    tileAtlas[ atlas.id ] = atlas;
}

我知道分配给onload的函数不会立即调用，因为

console.log（atlas.load）
在img.onload下，赋值仍然返回false

我已经在多个浏览器中检查了这个问题，我知道这些浏览器没有图像缓存。在我的主浏览器Firefox中，我将
network.http.use cache
和
browser.cache.offline.enable
设置为false

我正在使用MAMP在本地主机apache服务器上测试这段代码，但我不知道这是否相关

因为我知道使用超时来延迟图像的显示是可行的，这也意味着JSON加载和img.src路径是正确的

由于img.onload起火时间太快，我只能想到几个原因：

浏览器缓存了图像，因此将其视为已加载。但这并不能解释为什么即使刷新也不会显示图像
My.onload语法/用法不正确
谢谢你的帮助
 好的，找到问题了。这是一个错误，因为异步加载我的tileAtlus数组。我支持在尚未定义的数组上循环。我必须重新评估我的方法。谢谢
 你在哪里显示它？在HTML5画布上。对不起，我应该说的。
[16:12:06.209] "ground"
[16:12:06.210] false
[16:12:06.211] "ground-collision"
[16:12:06.211] false
[16:12:06.213] "objects-collision"
[16:12:06.213] false
[16:12:06.223] "ground"
[16:12:06.223] true
[16:12:06.224] "ground-collision"
[16:12:06.224] true
[16:12:06.225] "objects-collision"
[16:12:06.225] true