Question

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

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

这很好用 - 在firebug中我可以看到每次迭代后都会触发每个图像下载。

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

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

由于实际下载似乎是异步的，有没有办法阻止所有下载完成？

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
            }
        });
    });
});

Answer 2

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

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

// for loop loading images here

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

Answer 3

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

这是W3学校的参考资料：

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

Javascript阻塞直到图像预加载完成？

3 个答案: