jquery event fired when all the jquery.loads are completed?

Question

I have the following code:

$(function () {
    $("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
        DoSomething1();
    });
    $("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
        DoSomething2();
    });
    $("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
        DoSomething3();
    });
    $("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
        DoSomething4();
    });
    CodeIWishToExecuteAfterAllLoads();
});

As you know jquery load is asynchronous! so function "CodeIWishToExecuteAfterAllLoads()" will be executed before all the load events are completed.

I need an event or some way to get "CodeIWishToExecuteAfterAllLoads()" executed after all the loads are completed

Have anyone have an idea on how to acomplished that?

Thank you.

Answer 1

You can do this:

var loaded = 0;
var expected = 4;
var record_load = function(){
    loaded++;
    if(loaded == expected)
        CodeIWishToExecuteAfterAllLoads();
}

$("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
    DoSomething1();
    record_load();
});
$("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
    DoSomething2();
    record_load();
});
$("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
    DoSomething3();
    record_load();
});
$("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
    DoSomething4();
    record_load();
});