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

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

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

Проблема заключается в том, что функция обратного вызова запускается до завершения действий.

Ответ 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(); });

Ответ 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
});