如何使用jQuery默认预加载所有选项卡
如果我有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）？
问题的根源
两个事实：
- 当jQuery使用其
load方法加载选项卡时，如果另一个AJAX加载请求正在进行中，这将被中止（可能是因为如果您选择一个选项卡并由AJAX加载然后快速选择另一个加载，jQuery假定您不要我想加载两者 – 只是最后一个）。 - 当您设置要由AJAX
.tabs("load",0)的第一个选项卡时，默认情况下将调用.tabs("load",0)来填充第一个选项卡。
结合这两个事实，你会看到发生了什么。 首先调用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可以同时在多个选项卡式菜单上使用
- 使用其他加载回调函数使其可集成（如果这是一个单词）
我怎么弄错了什么？
通过使用萤火虫 。 它是firefox的插件。 Firebug在其控制台中显示所有AJAX请求，如截图所示，要弄清楚发生了什么并不难:)我真的推荐它。 （大多数主流浏览器都有类似的工具 – 在chrome或F12 i IE中按ctrl + shift + j。）
