5

我正在使用 javascript 使用以下代码预加载多个图像：

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

这很好用——在萤火虫中，我可以看到每次迭代后都会触发每个图像下载。

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

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

既然看起来实际下载是异步的，有没有什么办法可以阻塞直到所有的下载完成？

4

3 回答 3

2 
$(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
            }
        });
    });
});
于 2010-12-13T15:10:48.797 回答
0

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

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

// for loop loading images here

$('#loading').hide();
$('#content').show();
于 2010-12-13T15:07:30.307 回答
0

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

这是W3学校的参考：

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

于 2010-12-13T15:07:35.147 回答