Question

我正在为一个项目创建一个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页面，它引用了头标记中的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函数，当鼠标悬停在按钮上时，可以对按钮上的文本进行加粗，这样就可以了。

如果有人可以帮助我，或指出我的方向是正确的。

Answer 1

这里你最好的选择可能就是根本不使用alert;相反，使用现代技术，如绝对定位，风格迥异的div来显示您的信息。显示一旦它到达时显示不会妨碍显示图像的浏览器，而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事件，然后在显示警报之前返回浏览器30ms。

但是如果您预先缓存图像，则可以使load事件几乎立即生效。即使没有显示图像，大多数浏览器也会下载图像，因此如果添加

<img src="/path/to/incorrect/guess.png" style="display: none">

...对于每个错误猜测图片的页面，然后当您为#gallows图像分配相同的URL时，由于浏览器将其放在缓存中，它几乎会立即加载。以下是使用您的gravatar和load之后30ms延迟的示例：http://jsbin.com/fazera/1

Answer 2

首先，要在jQuery中通过ID获取对象，必须使用#。

var img = $("#gallows");

您不能使用src或其他＆＃34;香草＆＃34;直接在jQuery对象上的属性。但是，您可以执行以下任何操作：

从jQuery对象中获取实际元素。

var img = $("#gallows");
img.load(function() { ... } 
img[0].src = "image.jpg"; // First element in jQuery object

使用jQuery方法attr（推荐）。

var img = $("#gallows");
img.load(function() { ... } 
img.attr("src", "image.jpg");

像现在一样获取元素。

var img = document.getElementById("gallows");
img.onload = function() { ... } 
img.src = "image.jpg";

Answer 3

请确保您的jQuery代码位于HEAD标记内：

$( document ).ready(function() { ...your jQuery here... });

更多信息：Using jQuery, $( document ).ready()

您的问题：“我是否还需要从hangman.js文件中引用jquery.js文件？”

不，但在引用您的jQuery文件后在标题中放置<script src="hangman.js"></script>标记：

<head>
    <script src="jquery_version_that_you_are_using.js"></script>
    <script src="hangman.js"></script>
    <script>
    $( document ).ready(function() {
       //Your jQuery code here
    });

    </script>
</head>

异步图像加载

3 个答案: