Question

我刚开始通过做一个简单的纸牌游戏来学习Javascript而且我遇到了问题。在用户可以通过弹出框选择特朗普之前，我想将四张卡片显示为图像。但是，每次运行代码时，卡片图像都会在弹出框之后而不是之前显示。请查看相关代码：

function preloadImages() {
    var imgs = [];
    for (var i = 0; i < max_length_deck; i++) {
        imgs[i] = new Image();
        imgs[i].src = 'img/' + deck[i] + '.png';
    }
}

function generateDeck() {
    for (i = 0; i < colour.length; i++) {
        for (x = 0; x < number.length; x++) {
            deck.push(colour[i] + '' + number[x]);
        }
    }
}

function shuffleCards() {
    cards.length = 0;
    for (i = 0; i < max_length_deck; i++) {
        var random = Math.floor(Math.random() * deck.length);
        cards.push(deck[random]);
        deck.splice(random, 1);
    }
}

function dealCards() {
    generateDeck();
    preloadImages();
    shuffleCards();
    for (var i = 0; i < 4; i++) {
        window.document.images[i].src = 'img/' + cards[i] + '.png'; //I defined four image tags at html file
    }
    selectTrump();
}

function selectTrump() {
    var result = false;
    while (result != true) {
        trump = prompt("Please enter trump:", "");
        result = checkTrump(trump);
    }
}

我已经搜索并尝试了几件事（jQuery加载处理程序; window.setTimeout），但没有任何效果，我没有遇到问题。所以，非常感谢您的任何暗示！

BR Kjaer公司

Answer 1

在Dealcards（）函数中，您可能必须先等待图像加载，然后再处理卡片。您可以使用为此添加事件处理程序：

<html>
<head>
<script>
function loadImage()
{
alert("Image is loaded");
}
</script>
</head>

<body>
<img src="w3javascript.gif" onload="loadImage()" id="myImage">
</body>
</html>

//Or use:
// example

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

addEvent(
    document.getElementById('myImage'),
    'load',
    function () { alert('image loaded!'); }
);

addEventListener vs onclick

弹出框之前不会显示图像

1 个答案: