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

时间:2013-09-10 23:25:01

标签: javascript image 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;
}

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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