Question

据我所知，我已成功预装了所有图片。在FireFox中，一切都很好，但它拒绝在Chrome中显示。我已经遇到过webkit浏览器的其他随机怪癖，我认为这只是其中之一。这是适用的代码（我为长度道歉，只是冗长。大部分内容非常简单，我保证你。）

从$（document）.ready（）函数调用initResources（），其中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);
}

Answer 1

我在内联调用函数而不是在每个图像上调用.onload。这是在加载图像之前启动游戏初始化。感谢那些评论过的人，但是我在帖子发布后只看了一会儿：）

Answer 2

这是一个可能与此有关的chrome bug的链接。

https://code.google.com/p/chromium/issues/detail?id=245296

而不是使用

new Image()

以老式方式创建图像元素

document.createElement("img")

图像在Chrome中预加载画布

2 个答案: