JavaScript如何在图片预加载完成前阻塞执行？

Question

我正在使用JavaScript预加载多张图片，以下是代码：

```javascript ```

// do the following for each image where 'this' is the path
(new Image()).src = this;

这个代码可以正常工作——在firebug中，我可以看到每次迭代后都会触发下载每个图像。

我的问题是我想要阻塞，直到实际下载完成。换句话说，我想要向用户显示“正在下载图片”的对话框，直到所有图像都下载完成。

现在，如果我只是在preload循环执行之前显示对话框（并在循环完成后删除对话框），它仅仅捕获了下载请求而不是实际的下载完成。

由于实际下载是异步的，是否有任何方法可以阻止，直到所有下载都完成？

- lok

Answer 1

$(function () {
    var imgs = $('img');
    var length = imgs.length;
    var loaded = 0;
    $('img').hide().each(function () {
        $(this).bind('load', function () {
            if ((++loaded) === length) {
                imgs.show();
            }else { 
              //show images are still downloading
            }
        });
    });
});

- user372551

---

绑定时不需要使用.each() :) - Nick Craver

@nick能否再解释一下，我对学习它很感兴趣.. 我已经三周没有使用jQuery了 :) - user372551

.bind()适用于集合中的所有元素，并且大多数事件也有一种快捷方式，如.load()，因此在上面的代码中，你需要将其缩小到以下内容：http://www.jsfiddle.net/nick_craver/Uu2jz/ ...请注意，这假定.src稍后设置并且图像尚未加载，如果情况是这样，您需要循环检查.complete，并在其中触发load事件。 - Nick Craver

Answer 2

在预加载图像的同时，您可以隐藏包含内容的 div，同时显示“加载中”div，直到预加载完成。它可能看起来像这样：

$('#content').hide();
$('#loading').show();

// for loop loading images here

$('#loading').hide();
$('#content').show();

- ryanulit

---

谢谢，但我认为你没有理解我的问题。加载图像的循环只触发下载 - 它不会阻塞直到完成。 - lok

Answer 3

您可以使用onload方法，该方法在图像成功下载时触发，然后在onload函数中设置下一步操作。

这是W3学校的参考资料：

http://www.w3schools.com/jsref/event_img_onload.asp

- tshao