0

在加载图像之前，我的 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;
}

在这段代码之后，我使用不断检查每个图集的 .loaded 直到全部为真。当它们都为真时，我在画布上绘制图像，但没有显示任何内容。

但是如果我在绘制图像之前设置了一个超时时间（比如 1000 毫秒），那么图像就会被绘制得很好。这让我相信 .onload 是在图像实际加载之前触发的。

此外，我认为日志的时间戳彼此太接近，无法解释每张图像的加载时间，即 20-90 kb。

[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

我知道分配给 onload 的函数不会立即调用，因为console.log(atlas.loaded); 在 img.onload 分配下仍然返回 false。

我已经在多个我知道不保存图像缓存的浏览器中检查了这一点。在我的主浏览器 Firefox 中，我将network.http.use-cacheand设置browser.cache.offline.enable为 false。

我正在使用 MAMP 在 localhost apache 服务器上测试此代码，但我不知道这是否相关。

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

由于 img.onload 触发得太快，我只能想到几个原因：

  1. 浏览器缓存了图像，因此将其视为已加载。但这并不能解释为什么即使刷新也不会显示图像。
  2. 我的 .onload 语法/用法不正确。

谢谢你的帮助！

4

1 回答 1

0

好的，找到问题了。由于我的 tileAtlus 数组的异步加载，这是一个错误。我是在循环一个仍然未定义的数组。将不得不重新评估我的方法。谢谢！

于 2013-09-11T00:11:37.677 回答