个人中心
gpt4 book ai didi

javascript - 图像加载功能在 Internet Explorer 中不起作用

转载 作者：行者123 更新时间：2023-11-28 19:40:45 24 4
gpt4 key购买 nike

我编写了一个基本的回合制战斗游戏，它在 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>
<!-- Copyright 2013-2014 -->

<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> <!-- Close the main 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>

最佳答案

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

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

我多次使用超时在 IE 中解决了这些问题，似乎 IE 以其他方式处理事件。

关于javascript - 图像加载功能在 Internet Explorer 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25091589/

24 4 0
文章推荐： javascript - 如何链接多个 $.done 以按特定顺序运行函数
文章推荐： ios - 核心数据 : Using transient properties with read-only persistent store
文章推荐： ios - 未显示 UIViewController 时，属性返回 nil
文章推荐： python - (Python)正确的命名法是什么，以便我可以搜索和了解它？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com