等待动态子图像完成加载

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

在该constelation中,done只有在所有图像都能成功加载的情况下才会触发处理程序.如果您想知道是否至少有一个图像加载失败,您还可以绑定error事件处理程序和reject()promise.最后用.then( success, failure )而不是.done().

顺便说一句,我认为将代码放入DOMContentLoaded(jQuery .ready())更有意义.