0

是否有可能让 jQuery 等到这段代码完成它的工作？

if (hrefs[arrayCounter]) {
    $('<li>').append($('<img>', {
        src: hrefs[arrayCounter]
    }).css({
        "height": windowHeight
    })).appendTo(ul)
}​

在此之后图像滚动，我需要在滚动之前计算出宽度。换句话说，当图像仍在加载时，它就太快了。据我所知， appendTo() 不会接受回调，所以我该怎么做？

4

2 回答 2

1

在使用此代码之前，请注意图像的 onload 事件存在几个跨浏览器问题。它们在 jQuery.load方法的文档中进行了描述。

您需要构建一个 Deferred 对象并根据每个图像的 onload 函数对其进行管道传输。

$.when.apply($,$.map(hrefs, function(href) {
    var imgLoad = $.Deferred(),
        $img = $('<img>').css('height',windowHeight);
    ul.append($('<li>').append($img));
    $img.load($.proxy(imgLoad.resolve,imgLoad));
    $img.attr('src',href);
    return imgLoad;
})).done(function(){
    // all images are loaded when this executes
})

此代码用于jQuery.map将 href 数组转换为 Deferred 对象数组。在循环和附加图像时，每个图像都有自己的 Deferred 对象，其.resolve方法绑定到.load图像上的处理程序。当图像加载时，Deferred 将解析。

这个 Deferreds 数组作为参数应用到jQuery.when，它返回一个 Promise，当它的所有参数都解析时解析——在这种情况下，这意味着所有图像都已加载！然后我们将.done回调附加到该 Promise。

于 2012-10-07T20:02:46.403 回答
0

我制作了这个 jsFiddle，它基本上坚持图像的 .load() 事件来触发新代码。这仅适用于可加载的内容，但我理解的内容似乎符合您的需求。

基本上，您必须将要触发的代码绑定到.on('load',handler)图像事件。

希望这会有所帮助。

于 2012-10-07T19:56:45.597 回答