如何默认使用jQuery预先加载所有选项卡
-
02-10-2019 - |
题
如果我有4个选项卡,其中前2个装有Ajax,而最后2个是静态的,那么默认情况下,如何预先加载2个AJAX选项卡?
目前,仅自动加载第一个选项卡,单击时将加载第二个选项卡。我希望它们俩都被加载,以便当我单击第二个内容时,内容已被加载。我试图在第二个选项卡上调用加载事件:
$(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的所有)?
解决方案
问题根源
两个事实:
- 当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请求,正如屏幕截图所示,很难弄清楚发生了什么:)我真的推荐它。 (对于大多数主要浏览器来说,也有类似的工具 - 按CTRL+SHIFT+J中的Chrome或F12 I IE。)
不隶属于 StackOverflow