Preload JQuery UI tabs in the background

Question

All,

How can I preload all JQuery UI tabs while the first tab is still loading? I have tried the remote:true option, but it didnt work? There should be ajax spinners next to each tab name while the tabs are loading.

Thanks

Answer 1

Try something like this:

$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);

It initializes the tabs with the cache option so that tabs aren't reloaded after they have been loaded once. It then finds out the total number of tabs and sets the next tab to load as 1 (tabs are indexed starting with 0 ) Then it binds an event on the load event to start loading the next tab until it has hit all of them. To start it of it then loads the second tab.

Answer 2

More elegant solution than above:

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