如果我有 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
同时在同一个选项卡菜单上,我们必须找到另一种方法。该解决方案使用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 http://getfirebug.com。它是 Firefox 的插件。 Firebug 在其控制台中显示所有 AJAX 请求,正如屏幕截图所示,弄清楚发生了什么并不难:) 我真的推荐它。 (大多数主要浏览器都有类似的工具 - 在 chrome 中按 ctrl+shift+j 或在 IE 中按 F12。)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)