jquery-在多个.load之后执行[x]

Question

Once all three loads are complete...

$("#sidebar a").live("click", function(e){ 
    $(this).addClass("selected loading");
    $("#conceptual").load(conceptualUrl, null, function(){ $(this).removeClass('loading').show("fast");  });
    $("#development").load(developmentUrl, null, function(){ $(this).removeClass('loading').show("fast"); });
    $("#operational").load(operationalUrl, null, function(){ $(this).removeClass('loading').show("fast"); });
});

How can I remove the loading class from the link once ALL THREE loads are complete?

$("#sidebar a.loading").removeClass("loading");

Thanks!

Answer 1

var to_be_loaded = 3;
var loaded_so_far = 0;

$("#sidebar a").live("click", function(e){ 
    $(this).addClass("selected loading");
    $("#conceptual").load(conceptualUrl, null, function(){ checkLoad(); $(this).removeClass('loading').show("fast");  });
    $("#development").load(developmentUrl, null, function(){ checkLoad(); $(this).removeClass('loading').show("fast"); });
    $("#operational").load(operationalUrl, null, function(){ checkLoad(); $(this).removeClass('loading').show("fast"); });
});

function checkLoad() {
    loaded_so_far ++;
    if(loaded_so_far == to_be_loaded) $("#sidebar a.loading").removeClass("loading");
}