知道何时完成图像加载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变量计算节点列表，而不是一个字符串在原代码的问题，从我可以推断出：

​​