Biết khi nào hình ảnh được tải xong trong phản hồi AJAX

Question

Tôi có chức năng jQuery ajax tải một số nội dung vào một div, một số nội dung là hình ảnh. Tôi muốn nói cho đến khi những hình ảnh mà chỉ cần nạp trong ajax của tôi, được tải xong, và THEN chạy một chức năng, chẳng hạn như hiển thị nội dung. Bằng cách này, tôi sẽ không tải nội dung vào div và hình ảnh bắt đầu tải. Tôi muốn chúng được tải, sau đó đặt nội dung hoặc show() nội dung trong div.

Tôi đã thấy nhiều giải pháp cho điều này, chẳng hạn như sử dụng .load(), nhưng dường như không hoạt động đối với nội dung đã được tải bằng ajax.

Answer 1

Bạn cần thêm trình xử lý tải trong lời gọi AJAX để áp dụng cho hình ảnh đang được tải qua cuộc gọi AJAX. Bạn cũng có thể muốn có bộ hẹn giờ để hiển thị nội dung sau một khoảng thời gian trong trường hợp hình ảnh được tải trước khi trình xử lý tải được áp dụng.

$.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() sẽ không hoạt động vì hình ảnh được tải động; lệnh đó sẽ chỉ áp dụng cho hình ảnh trên trang tại thời điểm đó.

sử dụng $("img").live("load") để theo dõi thời điểm tải hình ảnh.

Answer 3

Đây là phiên bản cập nhật của mã số tvanfosson được cung cấp.

Bạn phải chắc chắn rằng các biến imageCount được đếm một danh sách nút và không phải là một chuỗi như là vấn đề trong mã gốc từ tôi có thể suy ra:

$.ajax({ 
    url  : 'somePage.html', 
    dataType : "html", 
    success : function(data) { 

     $(data).hide().appendTo('#someDiv'); 

     var imagesCount = $('#someDiv').find('img').length; 
     var imagesLoaded = 0; 

     $('#someDiv').find('img').load(function() { 
      ++imagesLoaded; 
      if (imagesLoaded >= imagesCount) { 
       $('#someDiv').children().show(); 
      } 
     }); 

     var timeout = setTimeout(function() { 
      $('#someDiv').children().show(); 
     }, 5000); 
    }      
});