Javascript 异步图像加载_Javascript_Jquery_Html

Javascript 异步图像加载

javascript jquery html

Javascript 异步图像加载,javascript,jquery,html,Javascript,Jquery,Html,我正在为一个项目制作一个刽子手游戏。我有我需要的大部分功能，但是我有一个问题。当最后一次猜测不正确时，在加载图像之前，它会显示警告框，告知您已丢失。我希望先加载图像，然后加载警报框我意识到问题在于DOM加载元素的方式，我应该在jQuery中创建一个回调函数这是我的代码中更改图像的那一行，它工作正常，直到到达最后一行 document.getElementById("gallows").src = displayGallows[incorrectGuesses - 1]; 我曾尝试使用Jqu

我正在为一个项目制作一个刽子手游戏。我有我需要的大部分功能，但是我有一个问题。当最后一次猜测不正确时，在加载图像之前，它会显示警告框，告知您已丢失。我希望先加载图像，然后加载警报框

我意识到问题在于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>

但是没有用，尽管我并不真正理解第二个，因为我在互联网上找到了这些例子

注意，在我的home.js文件中，我有一个简单的jQuery函数，当你将鼠标移到按钮上时，它可以将按钮上的文本加粗，这样就可以了

如果有人能帮我或者给我指出正确的方向，那就太好了。

你在这里最好的选择可能是根本不用

警报

；相反，使用现代技术，如绝对定位、风格优美的

div

来显示您的信息。显示这一点不会妨碍浏览器在图像到达后显示图像，而

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];

等待图像中的

加载

或

错误

事件，然后返回浏览器30毫秒，然后显示警报

但是，如果预缓存图像，则可以使

加载

事件几乎在瞬间触发。大多数浏览器都会下载图像，即使它没有显示，所以如果你添加

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

…为每个不正确的猜测图像添加到您的页面，然后当您将相同的URL分配给您的

#gallows

图像时，由于浏览器缓存中有该图像，它几乎会立即加载。下面是一个使用gravatar和加载后30毫秒延迟的示例：

首先，要在jQuery中按ID获取对象，必须使用

不能直接在jQuery对象上使用

src

或其他“普通”属性。但是，您可以执行以下任一操作：

从jQuery对象获取实际元素

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

使用jQuery方法
```
attr
```
（推荐）

像现在一样获取元素

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

请确保您的jQuery代码在HEAD标签中，在：

$（document）.ready（函数（）{…您的jQuery在这里…}）
更多信息：
您的问题：“我是否还需要从hangman.js文件中引用jquery.js文件？”
否，但在引用jQuery文件后，在标题中放置
标记：
<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> 


$（文档）.ready（函数（）{
//这里是您的jQuery代码
});
如果图像加载时间超过100毫秒，他也会遇到同样的问题。在这种情况下，预加载图像会有所帮助。另一种选择是从一开始就加载图像，但只是将其隐藏。一旦用户丢失图像，只需显示图像。@Aust：“如果图像加载时间超过100毫秒，他也会遇到同样的问题。”不会，因为在图像加载或加载失败之前，我们不会启动超时。“预加载图像在这种情况下会有帮助”是的，同意。啊，我的错误，我认为一旦图像开始加载，onload就会触发。
var img = $("#gallows");
img.load(function() { ... } 
img[0].src = "image.jpg"; // First element in jQuery object 

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

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

<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>