知道何時完成圖像加載AJAX響應

Question

我有一個jQuery ajax函數，將一些內容加載到div中，其中一些內容是圖像。我想說，直到那些剛剛加載到我的ajax中的圖像完成加載，然後運行一個函數（如顯示內容）。這樣，我就不會將內容加載到div中並且圖像開始加載。我希望他們被加載，然後把內容，或show()的內容在div中。

我已經看到很多解決方案，例如使用​​，但它似乎不適用於使用ajax加載的內容。

Answer 1

您需要在AJAX回調中添加裝載處理程序，以使其適用於通過AJAX調用加載的圖像。您可能還希望設置一個計時器，以便在應用裝載處理程序之前加載圖像以顯示內容。

$.ajax({ 
    ... 
    success: function(data) { 
      var imageCount = $(data).filter('img').length; 
      var imagesLoaded = 0; 
      $(data).hide() 
       .appendTo('#someDiv') 
       .filter('img') 
       .load(function() { 
        ++imagesLoaded; 
        if (imagesLoaded >= imageCount) { 
         $('#someDiv').children().show(); 
        } 
        }); 
      setTimeout(function() { $('#someDiv').children().show() }, 5000); 
     } 
}); 

Answer 2

$("img").load()將不起作用，因爲圖像是動態加載的;該命令將僅適用於當時頁面上的圖像。

使用$("img").live("load")來跟蹤圖像何時加載。

Answer 3

這是最新版本的代碼tvanfosson提供的。

你必須確保imageCount變量計算節點列表，而不是一個字符串在原代碼的問題，從我可以推斷出：

​​