我正在为一个项目创建 Hangman 游戏。我拥有我需要的大部分功能，但是我遇到了一个问题。当最后一次猜测不正确时，它会在加载图像之前显示警告框，告诉你你输了。我希望先加载图像，然后再加载警告框。
我意识到问题出在 DOM 加载元素的方式上，我应该在 jQuery 中创建一个回调函数。
这是我代码中更改图像的行，在到达最后一个之前它工作正常。
document.getElementById("gallows").src = displayGallows[incorrectGuesses - 1];
我曾尝试使用 Jquery 函数来实现此功能，但我对 jQuery 的了解几乎不存在。
var img = $("gallows");
img.load(function() {
alert("Unlucky, you lost. Better luck next time!");
});
img.src = displayGallows[incorrectGuesses - 1];
我将其与我在网上找到的许多帖子进行了比较，在我未经训练的情况下，它看起来还不错。当我进行故障排除时，我确实意识到 img.src 被分配了正确的值，但是图像没有出现在我的页面上或者没有触发警告框。
这让我相信这可能是链接到 jquery.js 文件的问题。我有一个 HTML 页面，在它的 head 标签中引用了 jQuery 文件。
<head>
<title>Hangman</title>
<link rel="stylesheet" href="base.css"/>
<script src="jquery.js"></script>
<script src="hangman.js"></script>
<script src="home.js"></script>
</head>
我用来编写 JavaScript 和 jQuery 的文件是 hangman.js 文件。
是否还需要从 hangman.js 文件中引用 jquery.js 文件？在阅读这篇文章时，我发现我可能必须这样做，所以我试过了:
///<reference path="jquery.js" />
还有这个
var jq = document.createElement('script');
jq.src = 'jquery.js';
document.getElementsByTagName('head')[0].appendChild(jq);
但无济于事，虽然我不太了解第二个，因为我在互联网上找到了这些示例。
请注意，在我的 home.js 文件中，我有一个简单的 jQuery 函数，可以在您将鼠标悬停在按钮上时将文本加粗，并且可以正常工作。
如果有人能帮助我或指出正确的方向，那就太好了。
最佳答案
这里最好的选择可能是根本不使用 alert；相反，使用现代技术，如绝对定位、样式精美的 div 来显示您的信息。 Showing 不会妨碍浏览器在图像到达后显示图像，而 alert 基本上会使浏览器突然停止，直到用户单击警报。
但是如果你想使用alert:
您等待图像中的 load 事件的概念很好，但您可能希望在之后短暂地返回给浏览器，让它有机会显示图像。
不使用 jQuery，因为您似乎没有使用它:
var img = document.getElementById("gallows");
img.onload = img.onerror = function() {
setTimeout(function() {
alert(/*...*/);
}, 30); // 30ms = virtually imperceptible to humans
};
img.src = displayGallows[incorrectGuesses - 1];
等待图像中的 load 或 error 事件，然后在显示警报之前返回给浏览器 30 毫秒。
但是如果您预先缓存图像，您几乎可以立即触发 load 事件。大多数浏览器会下载图像，即使它没有显示，所以如果你添加
<img src="/path/to/incorrect/guess.png" style="display: none">
...为每个不正确的猜测图像添加到您的页面，然后当您将相同的 URL 分配给您的 #gallows 图像时，由于浏览器在缓存中有它，它几乎会立即加载.下面是一个使用您的 gravatar 和 load 后 30 毫秒延迟的示例:http://jsbin.com/fazera/1
关于javascript - 异步图片加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24850286/