图片在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