Jquery .when和多个.load

我希望在完成操作后有一个回调函数，我正在尝试这样的事情：

$.when( $('#detail1').load('/getInfo.php'), $('#detail2').load('/getOther.php') ).then(function(a,b){ alert("done"); }); 

问题是回调函数在操作完成之前触发。

Answer 1

这是因为jQuery.when（）需要jQuery.Deferred实例，而load（）返回一个jQuery实例（请参阅http://api.jquery.com/jQuery.when/和http://api.jquery.com/load/ ）。

您可以解决此问题：

 // Create two Deferred instances that can be handed to $.when() var d1 = new $.Deferred(); var d2 = new $.Deferred(); // Set up the chain of events... $.when(d1, d2).then(function() { alert('done'); }); // And finally: Make the actual ajax calls: $('#detail1').load('/getInfo.php', function() { d1.resolve(); }); $('#detail2').load('/getOther.php', function() { d2.resolve(); }); 

Answer 2

我做了类似的代码，但更动态的图像。 希望它有所帮助。

 var deferreds = []; // Create a deferred for all images $('.my-img-class').each(function() { deferreds.push(new $.Deferred()); }); var i = 0; // When image is loaded, resolve the next deferred $('.my-img-class').load(function() { deferreds[i].resolve(); i++; }); // When all deferreds are done (all images loaded) do some stuff $.when.apply(null, deferreds).done(function() { // Do some stuff });