Javascript-img onload在映像加載前發射

我的img.onload似乎在映像加載之前發射。我試圖在畫布上繪製圖像。Javascript-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-cache和browser.cache.offline.enable設置爲false。

我正在使用MAMP在localhost apache服務器上測試此代碼，但我不知道這是否相關。

因爲我知道使用超時延遲圖像的顯示工作，這也意味着JSON加載和img.src路徑是正確的。

由於img.onload火災太快，我只能想到的一對夫婦的原因：

瀏覽器有圖片的緩存，因此認爲它是加載。但是這並不能解釋爲什麼即使刷新時也不會顯示圖像。
我的.onload語法/用法不正確。

感謝您的幫助！

來源

2013-09-10 user2736286

你在哪裏顯示它？ – epascarello

在HTML5畫布上。對不起，應該說明。 – user2736286

好的，找到了問題。這是由於我的tileAtlus數組異步加載導致的一個錯誤。我正在循環一個仍未定義的數組。必須重新評估我的方法。謝謝！

來源

2013-09-11 00:11:37 user2736286

Javascript-img onload在映像加載前發射

回答

相關問題