Jquery .when и несколько .load

Question

Я хочу иметь одну функцию обратного вызова после того, как действия выполняются, я пытаюсь что-то вроде этого:

$.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/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 
});