如何使用jQuery默认预加载所有选项卡

Question

如果我有4个选项卡,其中前2个加载ajax而后2个是静态的,我如何预先加载2个ajax选项卡？

目前,只有第一个选项卡会自动加载,第二个选项卡会在单击时加载.我希望它们都被加载,以便当我单击第二个时,内容已经加载.我试图在第二个选项卡上调用load事件,如下所示:

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 1);
});

这会加载第二个标签,但由于某些奇怪的原因,第一个标签根本没有加载; 即使我单击其他选项卡并单击第一个选项卡,它也不会加载.

然后我尝试了这样的事情:

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 0);
    $("#main-tabs").tabs("load", 1);
});

同样的结果,加载第二个选项卡,第一个选项卡不加载.

如何自动加载所有这些(ajax)？

Answer 1

问题的根源

两个事实:

• 当jQuery使用其load方法加载一个选项卡时,如果另一个AJAX加载请求正在进行中,这将被中止(可能是因为如果你选择一个选项卡并由AJAX加载然后快速选择另一个加载,jQuery假设你没有想要加载 - 只是最后一个).
• 当您设置要由AJAX加载的第一个选项卡时.tabs("load",0),默认情况下将调用以填充第一个选项卡.

结合这两个事实,你会看到发生了什么.load首先调用第一个选项卡,然后再调用以填充第二个选项卡.第二个负载取消第一个负载.

可能解决方案

由于您无法load同时在同一选项卡菜单上发出多个s,我们必须找到另一种方法.此解决方案使用load选项卡选项按顺序加载每个选项卡.换句话说,当一个加载完成后,它开始加载下一个加载.当那个完成后,它会加载下一个,依此类推.

//the indexes to be loaded.
//In your case it's only index 1 (index 0 is loaded automatically)
var indexesToLoad = [1];

var loadNextTab = function() {
    if (indexesToLoad.length == 0) return;
    var index = indexesToLoad.shift();
    $("#main-tabs").tabs("load",index);
};

$("#main-tabs").tabs({
    cache: true,
    load: loadNextTab
});

可能对此方法进行了改进:

• 而不是指定要加载的索引,让它自己弄清楚哪些选项卡是AJAX选项卡并加载它们
• 使它成为loadNextTab可以同时在多个选项卡式菜单上使用
• 使用其他加载回调函数使其可集成(如果这是一个单词)

我怎么弄清楚出了什么问题？

通过使用萤火虫.它是firefox的插件.Firebug在其控制台中显示所有AJAX请求,并且如屏幕截图所示,要弄清楚发生了什么并不是很难:)我真的推荐它.(大多数主流浏览器都有类似的工具 - 在chrome或F12 i IE中按ctrl + shift + j.)