Я, насколько мне известно, предварительно загрузил все мои изображения. В FireFox все выглядит просто отлично, но он отказывается появляться в Chrome. Я уже столкнулся с другими случайными причудами с браузерами webkit, и я полагаю, что это всего лишь один из них. Вот применимый код (я прошу прощения за длину, просто будучи многословным. Большая часть этого довольно проста, уверяю вас).Изображение Preloading Canvas в Chrome
initResources() вызывается из функции $ (document) .ready(), где холст также правильно инициализирован.
Конкретная проблема, похоже, является игровой панелью. X и O (это тиктак ...) выглядят прекрасно, но игровой план отказывается появляться на холсте только в Chrome. Работает во всех других браузерах. Инструменты разработчика Chrome настаивают на том, что они загружаются через вкладку «Сеть», консоль показывает все, что нужно. Спасибо.
[EDIT: Только что не удалось в 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);
}
Я слышал, единственный надежный способ использования 'img.onload' является инициализация это через '![]()
', что 'var img = new Image();' не будет запускать 'onload' последовательно. –
Вы используете встроенную функцию 'isLoaded', а не когда изображение загружено. Я думаю, что вы хотите '.onload = isLoaded' (без круглых скобок) Не уверен, что это связано, просто указав это. – Xymostech
Да, Xymostech, я считаю, что это проблема! Я просто заметил то же самое, прежде чем вернуться сюда и увидеть эти комментарии. Спасибо! –