等待jquery .each（）循環完成

對不起，如果這是一個愚蠢的問題。我使用.each來循環訪問一系列圖像，並對每個圖像執行一次內存加載，以查找它的真實寬度和高度。然後使用這些數字來填充數組。問題是我想等到循環完成後繼續我的任務。這裏是我的代碼：等待jquery .each（）循環完成

$.each(items, function(){ 
    $('<img/>').attr('src', $(this).attr('src')).load(function(){ 
      myArray.push(this.width); 
      myArray.push(this.height); 
    }); 
}); 
console.log(myArray.length);

控制檯始終記錄0，因爲我懷疑console.log正在執行.each循環完成之前。這是正確的嗎？我如何繞過它？十分感謝。

來源

2012-03-21 Strontium_99

'$ .each'不是異步的，'.load'是。 – 2012-03-21 15:15:46

由於圖像是異步加載的，你希望如何處理這個圖像？每次圖像完成加載時，您都可以通過在「push」後面暫停調用來記錄數組長度。或者Rody建議您可以改用同步呼叫。你需要什麼樣的行爲以及什麼原因？顯然，你正在尋找的不僅僅是你的問題狀態。 – mrtsherman 2012-03-21 15:36:05

最後的遊戲是我需要加載一些圖片，這些圖片的數量和大小可能會有所不同，請比較所有寬度和高度以找到兩者的上限。我還需要將寬度和高度都存儲在數組中，以供代碼進一步使用。 – 2012-03-21 15:49:03

指定一個增加onload的值，然後將該值與下一個循環進行比較。

僞代碼：

i=0; 
if(i<images){ 
load image here 
image.onload = i++; 
}

來源

2012-03-21 15:18:28 justanotherhobbyist

我會在.each循環中進行比較嗎？ – 2012-03-21 15:21:21

你在循環中的增量，並且循環 – justanotherhobbyist 2012-03-21 15:23:09

對不起之前檢查值。今天完全昏暗。我理解這個概念，但似乎無法將其納入我的代碼的上下文中。這將如何適應.each .load循環？ – 2012-03-21 15:44:07

load^docs被異步調用。您的每個循環都已完成，但圖像未完成加載

來源

2012-03-21 15:15:55 zzzzBov

K.我該如何解決這個問題？ – 2012-03-21 15:18:12

它變得非常迅速。所有圖像加載後會發生什麼？如果只有一些圖像被加載會發生什麼？如果沒有圖像加載會發生什麼？您可以添加關閉的計數器，以便每個「負載」回調可以遞增計數器並檢查是否所有圖像都已加載。 – zzzzBov 2012-03-21 15:22:51

我明白你的意思了。怎麼能這麼簡單這麼難。樂趣。 – 2012-03-21 15:46:35

負載執行異步確實如此。

你可以使用JQuery的阿賈克斯方法，這種方法可以設置呼叫是同步的，像（未測試，只是從我的頭）：

jQuery.ajax({ 
    url: 'http://url-to-img', 
    success: function(result) { 
       myArray.push(this.width); 
       myArray.push(this.height); 
       }, 
    async: false 
});

應該做的伎倆。請參閱JQuery站點上的Jquery ajax參考文檔以獲取更多信息：http://api.jquery.com/jQuery.ajax/

請注意，您不能使用同步跨域調用。

來源

2012-03-21 15:23:29

感謝您的建議，但我面臨的其他問題是這些圖像是從另一個域加載的。我真的不想進入使用代理來加載圖像的問題。再次感謝。 – 2012-03-21 15:45:39

也許whenSync插件是你的東西呢？ http://www.bennadel.com/blog/2326-jQuery-whenSync-Plugin-For-Chaining-Asynchronous-Callbacks-Using-Deferred-Objects.htm – 2012-03-21 15:55:33

等待jquery .each（）循環完成

回答

相關問題