javascript - 等待动态子图像完成加载

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-eventhandler。您也可以将它与 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 处理程序只有在所有图像都可以成功加载时才会触发。如果您想知道是否至少有一张图片加载失败，您还可以绑定(bind)一个 error 事件处理程序和一个 reject() promise 。最后使用 .then( success, failure ) 而不是 .done()。

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