Question

我写了一个基本的回合制战斗游戏，它在chrome和firefox中运行得非常好。但是，尽管所有其他代码都运行良好，但它不会在Internet Explorer中加载任何图像。我已将其缩小到我的图像上传功能的问题。以下是相关代码段：

// image load functions

function loadSpriteSheet() {
    gv.spriteSheet = new Image();
    gv.spriteSheet.src = 'Sprite Sheet v5.png';
}

function loadGUI() {
    gv.GUI = new Image();
    gv.GUI.src = 'gui.png';
}

function loadBackgrounds() {
    gv.backgrounds = new Image();
    gv.backgrounds.src = 'backgrounds.png';
}

// drawing functions

function drawArenaFloor() {
    // bunch of code to draw the floor of the arena in tiles

}

function drawUnderlay() {
    // bunch of code to draw stuff like player selector box

}

function drawArenaWalls() {
    // bunch of code to draw the walls of the arena in tiles

}

// main code body here


// this is the 'problem' function
function resizeCanvas() {
    // runs each time the DOM window resize event fires. resets the canvas dimensions to match window, then draws the new borders accordingly

    // bunch of code here to determine screen size, arena size etc.

    // load all the images for the game
    loadBackgrounds();
    loadSpriteSheet();
    loadGUI();

    // this is the 'problem' code
    gv.spriteSheet.onload = function() {
        drawArenaFloor();
        drawUnderlay();
        drawArenaWalls();
    }
}

现在这是有趣的事情。如果我删除了onload处理程序，那么有时会在IE中加载，但从不加载chrome / firefox：

// this is the 'problem' code, revised to *sometimes* work in IE (basically by commenting out the onload handler) // gv.spriteSheet.onload = function() { drawArenaFloor(); drawUnderlay(); drawArenaWalls(); // }

这个真让我难过。有什么想法吗？

以下是所请求的完整HTML源代码：

<!DOCTYPE html>  <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Arena</title> <link type="text/css" rel="stylesheet" href="style.css"/> <script src="app.js"></script> </head> <body> <div id="Top section"> <canvas id="shopButtonCanvas" class = "topButton"></canvas> <input type="button" alt="Shop" id="Shop button" class="topButton" onclick="shop()"> <div> <p id="Display size">XxY, A/R</p> </div> <div id = "Ad container" class="xxx" onclick="clickOnAd()"> </div> <canvas id="closeButtonCanvas" class = "topButton"></canvas> <input type="button" alt="Close" id="Close button" class="topButton" onclick="closeButton()"> </div> <div id = "Main" align="center"> <canvas id="Arena floor"></canvas> <canvas id="Underlay"></canvas> <canvas id="Arena walls"></canvas> <canvas id="Arena">Your browser does not support HTML5 Canvas.</canvas> <div id="Status bars" align="left"> <canvas id="detailButtonCanvas" class="button"></canvas> <input type="button" alt="Player Detail" id="Detail button" class="button" onclick="detailButton()"> <canvas id="Player health bar"></canvas> <div id="Round counter"> <div id="Round display"> <span><b>Round: </b><span id="Current round"></span> / <span id="Max rounds"></span></span> </div> <div id="Turn display"> <span id="Turn outer"><b>Turn: </b></span><span id="Turn" class="player"></span> </div> <div id="Turn arrow"></div> </div> <canvas id="enemyDetailButtonCanvas" class="button"></canvas> <input type="button" alt="Enemy Detail" id="Enemy detail button" class="button" onclick="detailButton()"> </div> <div id="Player stats"> <h3 id="Player team name"><u>Player Team Stats</u></h3> <b>Players: </b><span id="Player living pieces"></span> <br> <b>Health: </b><span id="Player team health"></span> <br> <b>Stamina: </b><span id="Player team stamina"></span> <br> <b>Moves: </b><span id="Player team moves"></span> <h3 id="Player name"><u>Player Stats</u></h3> <b>Level: </b><span id="Player level"></span> <br> <b>Health: </b><span id="Player health"></span> <br> <b>Stamina: </b><span id="Player stamina"></span> <br> <b>Armor: </b><span id="Player AC"></span> <br> <b>Weapon: </b><span id="Player weapon"></span> <br> <b>Action: </b><span id="Player action"></span> </div> <div id="Enemy stats"> <h3 id="Enemy team name"><u>Enemy Team Stats</u></h3> <b>Enemies: </b><span id="Enemy living pieces"></span> <br> <b>Health: </b><span id="Enemy team health"></span> <br> <b>Stamina: </b><span id="Enemy team stamina"></span> <br> <b>Moves: </b><span id="Enemy team moves"></span> <h3 id="Enemy name"><u>Enemy Stats</u></h3> <b>Level: </b><span id="Enemy level"></span> <br> <b>Health: </b><span id="Enemy health"></span> <br> <b>Stamina: </b><span id="Enemy stamina"></span> <br> <b>Armor: </b><span id="Enemy AC"></span> <br> <b>Weapon: </b><span id="Enemy weapon"></span> <br> <b>Action: </b><span id="Enemy action"></span> </div> <div id="Container" align="center"> <canvas id="healthButtonCanvas" class="containerButton"></canvas> <input type="button" alt="Health" id="Health button" class="containerButton" onclick="healthIncrease()"> <canvas id="staminaButtonCanvas" class="containerButton"></canvas> <input type="button" alt="Stamina" id="Stamina button" class="containerButton" onclick="staminaIncrease()"> <canvas id="defendButtonCanvas" class="containerButton"></canvas> <input type="button" alt="Defend" id="Defend button" class="containerButton" onclick="defend()"> <canvas id="switchWeaponButtonCanvas" class="containerButton"></canvas> <input type="button" alt="Switch Weapon" id="Switch weapon button" class="containerButton" onclick="switchWeapon()"> <canvas id="endTurnButtonCanvas" class="containerButton"></canvas> <input type="button" value="End Turn" id="End turn button" class="containerButton" onclick="endTurnButton()"> </div> </div>  <div id = "Test" align="center" class = "test"></div> <div id="Text area" align="left"> <p id="Result">Loading...</p> <canvas id="messageLogButtonCanvas"></canvas> <input type="button" value="Message Log" id="Message log button" class="message" onclick="messageLog()"> </div> </body> </html>

Answer 1

这可能看起来很荒谬..但你可以试试这个：

 gv.spriteSheet.onload = function() {
        setTimeout(function(){
          drawArenaFloor();
          drawUnderlay();
          drawArenaWalls();
        },500);
    }

我已经在IE中多次使用超时来解决这些问题，好像IE会以其他方式处理事件。

图像onload功能在Internet Explorer中不起作用

1 个答案: