如何使用jQuery默认预加载所有选项卡

如果我有4个选项卡，其中前2个选项是使用ajax加载的，而最后2个选项是静态选项，那么默认情况下如何预加载2 ajax选项卡？如何使用jQuery默认预加载所有选项卡

目前，只有第一个标签被自动加载，第二个被点击加载。我希望它们都被加载，所以当我点击第二个时，内容已经加载。我试着这样调用第二个选项卡上加载事件：

$(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的）？

来源

2010-09-10 Ricardo Amaral

来源问题

两个事实：

当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可以同时在多个选项卡式菜单上使用
使其可与其他负载回调函数集成（如果这是一个词）

我怎么知道哪里出了问题？

通过使用firebug。这是一个Firefox的插件。 Firebug在其控制台中显示所有的AJAX请求，并且截图显示，确定发生了什么并不困难:)我真的推荐它。（也有类似的工具，对于大多数主流浏览器 - 。按ctrl +镀铬或F12我即是Shift + J）

Screenshot of Firebug console showing ajax requests

来源

2010-09-10 22:55:38

是的，我知道萤火虫的，我把它和使用它很多关于几但我需要学习如何正确使用它。我必须进一步探索...感谢修复。我还没有尝试过，但我明白这个问题，为什么会发生，你的解决方案是否有意义。 – 2010-09-11 04:23:57

如何使用jQuery默认预加载所有选项卡

回答

相关问题