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

一旦ALL THREE加载完成，如何从链接中删除加载类？

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

只需使用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();
        });
    });
};

Answer 3

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 4

在开始加载之前将全局变量设置为3;让每个回调将它减1，然后检查它是否为零 - 如果是，则该回调删除加载类。

Answer 5

快速而肮脏的方法是使用每次运行其中一个函数时计数的变量来跟踪加载：

$("#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 6

您可以在整个网站中重复使用的东西。应该工作正常。

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以使它更强大;添加方法以排队新操作或删除当前正在运行的操作，也许使其更通用。我只是一个快速而又肮脏的例子：）

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

6 个答案: