jQuery的 - 做[X]後多發.load

Question

一旦所有三個負載完成...

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

如何從鏈接一旦所有三個負載完成刪除加載類？

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

謝謝！

Answer 1

嘗試以下操作：

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

的show功能通過關閉維護的num_loaded和num_to_load知名度。由於函數都是相同的，因此將匿名回調重新分配到單個命名函數中也是有意義的。

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

啓動加載之前設置一個全局變量3;讓每個回調函數將其減1，然後檢查它是否爲零 - 如果是，則該回調函數將刪除加載類。

Answer 4

快速和骯髒的方式將與每一個功能一個運行時計數的變量來跟蹤負載：

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

一旦loadCount達到最大，執行doSomething()功能。

Answer 5

有點奇怪，你可以重複使用整個網站。應該工作正常。

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

當然你可以修改Loader使其更加強大;添加方法來排隊新的動作或者刪除當前正在運行的動作，或許使其更加通用。我只是一個快速而骯髒的例子:)

Answer 6

只要使用jQuery.loadAll ...哦，等等，它不存在？在這裏你去：

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