Question

我的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;
}

在这段代码之后，我会继续检查每个地图集。载荷直到一切都是真的。当它们都是真的时，我在画布上绘制图像，但没有显示任何内容。

但是如果我在绘制图像之前设置了超时（比如说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-cache和browser.cache.offline.enable设置为false。

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

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

由于img.onload过早发射，我只能想到几个原因：

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

感谢您的帮助！

Answer 1

好的，发现了这个问题。由于我的tileAtlus数组的异步加载，这是一个错误。我是为了循环一个尚未定义的数组。必须重新评估我的方法。谢谢！

Javascript - 在加载图像之前触发img onload

1 个答案: