知道何时在AJAX响应中加载图像
我有一个jQuery ajax函数，它将一些内容加载到div中，一些内容是图像。 我想说直到那些刚刚加载到我的ajax中的图像完成加载，然后运行一个函数，比如显示内容。 这样，我就不会将内容加载到div中并且图像开始加载。 我希望它们被加载，然后将内容或show()内容放入div中。
我已经看到了很多解决方案，例如使用.load() ，但它似乎不适用于使用ajax加载的内容。
您需要在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 ); } });
这是tvanfosson提供的代码的更新版本。
您必须确保imageCount变量计算节点列表而不是字符串，因为我可以推断出原始代码中的问题：
$.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); } });
$("img").load()不起作用，因为图像是动态加载的; 该命令仅适用于当时页面上的图像。
使用$("img").live("load")来跟踪图像的加载时间。