默认情况下如何使用jQuery预加载所有选项卡 [英] How to pre-load all tabs by default with jQuery

问题描述

如果我有4个标签页，其中前2个标签页都加载了ajax，而后2个标签页是静态的，那么如何默认情况下如何预加载2个ajax标签页?

If I have 4 tabs where the first 2 are loaded with ajax and the last 2 are static, how do I pre-load the 2 ajax tabs by default?

目前，仅第一个选项卡会自动加载，单击时会加载第二个选项卡.我希望它们都被加载，以便在单击第二个时都已经加载了内容.我试图这样在第二个选项卡上调用load事件:

For the moment, only the first tab is automatically loaded, the second one is loaded when clicked. I want them both to be loaded so that when I click the second one, the content is already loaded. I tried to call the load event on the second tab like this:

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

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

这将加载第二个选项卡，但是由于某些奇怪的原因，第一个选项卡根本没有加载；即使单击其他选项卡，然后再单击第一个选项卡，它也不会加载.

And this loads the second tab, but for some strange reason, the first one doesn't load at all; not even when I click a different tab and click back on the first one, it will not load.

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

Then I tried something like this:

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

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

结果相同，第二个标签页已加载，第一个标签页未加载.

Same result, second tab is loaded, first one is not.

如何自动加载所有(ajax)?

How can all of them (ajax ones) be loaded automatically?

推荐答案

问题根源

两个事实:

• 当jQuery使用其load方法加载选项卡时，如果另一个AJAX加载请求正在进行中，则该请求将被中止(可能是因为如果您选择了一个选项卡并由AJAX加载，然后快速选择了另一个要加载的选项卡， jQuery假设您不想同时加载两者-仅加载最后一个).
• 当您设置要由AJAX加载的第一个标签时，默认情况下会调用.tabs("load",0)来填充第一个标签.

• When jQuery loads a tab with its load method, if another AJAX load request is in progress, this will be aborted (probably because if you select one tab and it loads by AJAX and then quickly select another to be loaded, jQuery assumes you don't want to load both - just the last one).
• When you set the first tab to be loaded by AJAX, .tabs("load",0) will be called by default to populate the first tab.

结合这两个事实，您会发现发生了什么.首先调用load以填充第一个选项卡，然后再次调用以填充第二个选项卡.第二个负载抵消了第一个负载.

Combining these two facts, you see what's going on. load is being called first to populate the first tab, and then called again to populate the second one. The second load cancels out the first.

可能的解决方案

由于您不能同时在同一选项卡菜单上发布多个load，因此我们将不得不寻找另一种方法.此解决方案使用选项卡的load选项按顺序加载每个选项卡.换句话说，当一个加载完成时，它将开始加载下一个加载.完成后，将加载下一个，依此类推.

Since you can't issue multiple loads on the same tab menu at the same time, we'll have to find another way. This solution uses the load option of tabs to load each tab in sequence. In other words, when one load is finished, it starts loading the next one. When that one is finished, it loads the next one and so on.

//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
• 使它与其他负载回调函数可集成(如果是这样的话)

• instead of specifying indexes to load, make it figure out itself what tabs are AJAX tabs and load them
• make it so loadNextTab can be used on multiple tabbed menus at the same time
• make it integratable (if that's a word) with other load callback functions

我如何找出问题所在?

使用 firebug .这是Firefox的插件. Firebug在其控制台中显示了所有AJAX请求，并且如屏幕截图所示，找出正在发生的事情并不难:)我真的推荐它. (大多数主流浏览器都有类似的工具-在chrome或F12 i IE中按ctrl + shift + j.)

By using firebug. It's an addon for firefox. Firebug shows all AJAX requests in its console, and as the screenshot shows, it wasn't that hard to figure out what was going on :) I really recommend it. (There are similar tools for most major browsers - press ctrl+shift+j in chrome or F12 i IE.)

这篇关于默认情况下如何使用jQuery预加载所有选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！