jquery - faire [x] après mutiple .load

Question

Une fois que les trois charges sont terminées ...

$("#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"); }); 
}); 

Comment puis-je supprimer la classe de chargement à partir du lien lorsque les trois charges sont terminées?

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

Merci!

Answer 1

les opérations suivantes:

$("#sidebar a").live("click", function(e){ 
    $(this).addClass("selected loading"); 
    var num_loaded = 0; 
    var num_to_load = 3; 

    function show() { 
     num_loaded++; 
     if (num_loaded === num_to_load) { 
     $(this).removeClass('loading').show("fast"); 
     } 
    } 

    $("#conceptual").load(conceptualUrl, null, show); 
    $("#development").load(developmentUrl, null, show); 
    $("#operational").load(operationalUrl, null, show); 
}); 

La fonction show maintient la visibilité de num_loaded et num_to_load par la fermeture. Puisque les fonctions sont toutes les mêmes, il est également logique de recalculer les rappels anonymes en une seule fonction nommée.

Answer 2

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"); 
} 

Answer 3

Définissez une variable globale sur 3 avant de démarrer les charges; chaque callback le décrémente de 1 et vérifie ensuite s'il est nul - si c'est le cas, ce callback supprime la classe de chargement.

Answer 4

La façon rapide et sale serait de suivre le chargement avec une variable qui compte à chaque fois que l'une des fonctions est exécuté:

$("#sidebar a").live("click", function(e){ 
    var loadCount = 0; 
    $(this).addClass("selected loading"); 
    $("#conceptual").load(conceptualUrl, null, function(){ 
     loadCount++; 
     doSomething(); 
    }); 
    $("#development").load(developmentUrl, null, function(){ 
     loadCount++; 
     doSomething(); 
    }); 
    $("#operational").load(operationalUrl, null, function(){ 
     loadCount++; 
     doSomething(); 
    }); 

    function doSomething() 
    { 
     if (loadCount == 3) 
     { 
      $(this).removeClass('loading').show("fast"); 
     } 
    } 
}); 

Une fois que le loadCount atteint le maximum, exécutez la fonction doSomething().

Answer 5

Quelque chose d'un peu fantaisiste que vous pouvez réutiliser dans tout le site. Devrait fonctionner correctement.

var Loader = function() { 
    var options = arguments[0]; 
    this.actions = options.actions; 
    if (!this.actions || !this.actions.length) { 
     throw 'Loader: FATAL ERROR: Nothing to do. All your base are belong to us.'; 
    } 
    this.onComplete = options.onComplete || function() {}; 
    this.next(); 
} 

Loader.prototype = { 
    next: function() { 
     if (this.actions.length) { 
      var action = this.actions.pop(), me = this; 
      $(action.selector).load(action.url, action.data, me.next); 
     } else { 
      this.onComplete(); 
     } 
    } 
} 


var loaders = []; // or maybe asingle variable you overwrite every time, I don't know 

$("#sidebar a").live("click", function(e){ 
    $(this).addClass("selected loading"); 
    loaders.push(new Loader({ 
     actions: [ 
      {selector: "#conceptual", url: conceptualUrl, data: null}, 
      {selector: "#development", url: developmentUrl, data: null}, 
      {selector: "#operational", url: operationalUrl, data: null} 
     ], 
     onComplete: function() { 
      $("#sidebar a.loading").removeClass("loading"); 
     } 
    })); 
}); 

Bien sûr, vous pouvez modifier le chargeur pour le rendre plus puissant; ajouter des méthodes pour mettre en file d'attente de nouvelles actions ou supprimer celle en cours, peut-être la rendre plus générale. Le mien est juste un exemple rapide et sale :)

Answer 6

Il suffit d'utiliser jQuery.loadAll ... oh, attendez, ça n'existe pas? C'est parti:

$("#sidebar a").live("click", function(e){ 
    var side = $(this); 
    side.addClass("selected loading"); 

    $.loadAll({ 
     $(conceptual): conceptualUrl, 
     $(development): developmentUrl, 
     $(operational): operationUrl 
    }, 
    function() { 
     side.removeClass('loading').show("fast"); 
    }); 
}); 

jQuery.fn.loadAll = function(urls, callback) { 
    var loaded = urls.length; 
    jQuery.each(urls, function(i, url) { 
     this.load(url, function() { 
      loaded--; 
      if(!loaded && callback) 
       callback(); 
     }); 
    }); 
};