Question

假设我有这样的情况：

$(window).load(function() {

    $("body").append("<div id='container'></div>");
    var i=1;
    for ( i=1; i<=10; i++ ) {
            $("#container").append("<img src='img"+i+".jpg'></img>");
    }
});

将加载10个不同大小的随机图像（img1.jpg ... jp10.jpg）。现在让我们说我需要这些图像中的一些属性。例如，10个加载图像的总高度组合。这需要在我们使用.height()之前加载所有图像。

现在的问题是：

在开始计算之前，我怎么能等到所有图像都装满？或者更一般的是，在执行函数之前，我怎么能等到某个给定容器中的所有图像都被加载？

使用1张图片，我可以使用.load()并具有回调功能。但是有了多个图像，似乎并不容易。一种解决方案是向添加到计数器的每个图像添加.load()，并且一旦该计数器达到某个值，则执行该函数。看起来有点hacky（但不是太hacky）。只是想就这件事得到一些意见。

Answer 1

您可以使用jQuery创建这些图像，并附加onload - 事件处理程序。您也可以将它与jQuery的Deferred对象结合起来将各个事物链接起来。这可能看起来像：

$(document).ready(function() {
    $("body").append("<div id='container'></div>");
    var i      = 1,
        images = [ ],
        $img   = null;

    for ( i=1; i<=10; i++ ) {
        $img = $('<img>', {
            load: function() {
                images.push( $.Deferred(function( promise ) {
                    promise.resolve();
                }).promise() );
            }
        }).appendTo( '#container' );

        $img.attr('src', 'img' + i + '.jpg');
    }

    $.when.apply( null, images ).done( function() {
        // all images were loaded here, do whatever you want.
    });
});

在该安排中，done处理程序仅在所有图像都能成功加载时才会触发。如果您想知道至少有一个图像加载失败，您还可以绑定error事件处理程序和reject()一个承诺。最后使用.then( success, failure )代替.done()。

顺便说一句，我认为将代码放入DOMContentLoaded（jQuery的.ready()）更有意义。

Answer 2

由于您使用JS加载图像，因此您知道何时加载它们的唯一方法是使用加载事件处理程序监视每个图像。所以，鉴于此，我会说你的反思想听起来像是最简单的方法。

如果您在页面源中加载图像，则可以使用页面的onload处理程序，因为它等待所有图像加载完成。

我能想到的另一个简单的可能性是通过将图像作为图像标记放在实际页面中来预加载图像。如果您不希望它们显示在该位置，则可以隐藏它们。然后，在执行页面onload处理程序之前，它们将被浏览器加载，并且它们将准备好检查它们的大小，然后附加新的图像标记（使用页面中其他位置的相同URL）。由于浏览器已经加载了它们，新的标签将从缓存中加载，因此没有真正的速度问题。

等待动态子图像完成加载

2 个答案: