圖片在Chrome中預加載畫布

據我所知，我已經成功預裝了所有圖片。在FireFox中，一切都呈現得很好，但它拒絕在Chrome中顯示。我已經用webkit瀏覽器遇到過其他隨機怪癖，我認爲這只是其中之一。這裏是適用的代碼（我對這個長度表示歉意，只是冗長的，大部分都很簡單，我向你保證）。圖片在Chrome中預加載畫布

initResources（）從$（document）.ready（）函數中調用，其中canvas也被正確初始化。

具體問題似乎是遊戲板。 X和O（它的tictactoe ......）顯得很好，但是遊戲板拒絕在Chrome上單獨出現在畫布上。適用於所有其他瀏覽器。 Chrome的開發者工具堅持認爲他們是通過網絡標籤加載的，控制檯顯示了它應該做的一切。謝謝。

[編輯：剛纔在Firefox中失敗了。可能是一個緩存的問題，在這一點上，我更糊塗]

var canvas, context, playerPiece, aiPiece; 
var x = new Image(); 
var o = new Image(); 
var gameBoard = new Image(); 
var numResources = 3; // Total number of resources to wait for loading 
var curResources = 0; 

function initResources() { 
    // Get all our resources ready to go 
    x.height = 130; 
    x.width = 130; 
    x.onload = isLoaded(); 
    x.src = "images/gamepieceX.png"; 

    o.height = 130; 
    o.width = 130; 
    o.onload = isLoaded();// = curResources++; 
    o.src = "images/gamepieceO.png"; 

    gameBoard.height = 500; 
    gameBoard.width = 500; 
    gameBoard.onload = isLoaded(); //= curResources++; 
    gameBoard.src = "images/gameBoard.png"; 
} 

function isLoaded() { 
    curResources++; 
    console.log("Loaded resource! Total: " + curResources); 
    if(curResources == numResources) { 
     console.log("All loaded up! Moving on!"); 
     gameSetup(); 
    } 
} 

function gameSetup() { 
    // Draw our board and assign a piece 
    console.log("Setting up game!"); 
    playerPiece = x; 
    aiPiece = o; 

    // Draw gameboard 
    context.drawImage(gameBoard, 0, 0); 
    console.log(gameBoard); 

    canvas.addEventListener ("mousedown", mouseClicked, false); 
}

來源

2013-03-12 Daniel Gast

聽說要利用的唯一可靠方法'img.onload'是初始化它通過一個''，那'var img = new Image（）;''不會持續激發'onload'。 – 2013-03-12 05:27:10

您正在運行'isLoaded'函數內聯，而不是在圖像實際加載時。我認爲你想'.onload = isLoaded'（沒有括號）不知道這是否相關，只是指出來。 – Xymostech 2013-03-12 05:28:18

是的，Xymostech，我相信這是問題！在回到這裏並看到這些評論之前，我剛剛發現了同樣的東西。謝謝！ – 2013-03-12 05:30:09