如何使用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，因此我们必须找到另一种方法。此解决方案使用选项卡的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可以同时在多个选项卡式菜单上使用
• 使用其他加载回调函数使其可集成（如果这是一个单词）

我如何找出问题所在？

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