jQuery使腳本等待，直到行動完成

是否有可能讓jQuery等到這段代碼完成它的工作？jQuery使腳本等待，直到行動完成

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

緊隨其後的圖像滾動，我需要計算寬度之前我滾動。換句話說，在圖像仍在加載的時候太快了。從我所知的appendTo（）不會採取回調，所以我怎麼做到這一點？

來源

2012-10-07 Dan

我製作了this jsFiddle，它基本上貼着圖像的.load（）事件來觸發新代碼。這隻適用於loadable content，但我所瞭解的東西似乎適合您的需求。

Bascially你必須綁定你想要被解僱的代碼到你的圖片的.on('load',handler)事件。

希望這有助於某種方式。

來源

2012-10-07 19:56:45 Onheiron

嗨，這將如何處理我的情況 - 我有一個元素，當它被點擊時觸發這段代碼。它將更多圖像加載到滑塊中... – Dan

在使用此代碼之前，請注意，對於圖像的onload事件有幾個跨瀏覽器問題。 They are described in the documentation for jQuery's .load method.

您需要構建一個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將hrefs數組轉換爲Deferred對象數組。在循環和附加圖像時，每個圖像都會有自己的Deferred對象，其.resolve方法綁定到圖像上的.load處理程序。當圖像加載時，延遲將被解析。

這個Deferreds數組作爲參數應用於jQuery.when，它返回一個Promise，該Promise在所有參數解析時解析 - 在這種情況下意味着所有圖像都已加載！然後我們給該Promise附上一個.done回調。

來源

2012-10-07 20:02:46 zetlen

jQuery使腳本等待，直到行動完成

回答

相關問題