在后台预加载 JQuery UI 选项卡答案

【问题标题】：Preload JQuery UI tabs in the background在后台预加载 JQuery UI 选项卡
【发布时间】：2009-11-12 18:28:27
【问题描述】：

全部，

如何在第一个选项卡仍在加载时预加载所有 JQuery UI 选项卡？我尝试了 remote:true 选项，但它不起作用？加载选项卡时，每个选项卡名称旁边应该有 ajax 微调器。

谢谢

【问题讨论】：

【解决方案1】：

试试这样的：

$tabs = $('#tabs').tabs({
    cache: true
});
var total = $tabs.find('.ui-tabs-nav li').length;
var currentLoadingTab = 1;
$tabs.bind('tabsload',function(){
    currentLoadingTab++;
    if (currentLoadingTab < total)
        $tabs.tabs('load',currentLoadingTab);
    else
        $tabs.unbind('tabsload');
}).tabs('load',currentLoadingTab);

它使用缓存选项初始化选项卡，以便选项卡在加载一次后不会重新加载。然后它找出选项卡的总数并将下一个选项卡设置为 1 （选项卡从 0 开始索引）然后它在 load 事件上绑定一个事件以开始加载下一个选项卡，直到它击中所有选项卡。要启动它，然后加载第二个选项卡。

【讨论】：

这很好用！谢谢.. 是否可以一次预加载多个选项卡，而不是一个接一个地加载它们？另外，是否可以在选项卡文本旁边放置一个微调器图像？我不希望它显示“正在加载..”..它应该只是在标签加载时附加了微调器图像的标签文本..提前致谢..
微调器文本是发送到 ui.tabs 的选项： $abs = $('#tabs').tabs({ cache: true, spinner: '' });
你的意思是标签从1开始索引吗？否则，此代码似乎永远不会加载选项卡 2，因为您在调用 load 之前递增

【解决方案2】：

比上面更优雅的解决方案：

$tabs = $('#tabs').tabs({
    cache : true,
    load : function(event,ui) {
        try {
            $tabs.tabs('load',ui.index+1);
        } catch (e) {
        }
    }
});

【讨论】：

每次点击不同的标签时，这不会重新加载所有后续标签吗？所以说我一次浏览一个标签。当我单击第一个选项卡时，将加载所有选项卡。然后当我单击第二个选项卡时，将加载 2 之后的所有选项卡再次。