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

Unison

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.

Standing

This works great ! Thanks.. Is it possible to preload multiple tabs at once, instead of loading them one after the other? Also, is it possible to put a spinner image next to the tab text? I don't want it to display "Loading..".. It should just be the tab text appended with the spinner image while the tab is loading.. Thanks in advance.. – Unison

The spinner text is an option to send to ui.tabs: $abs = $('#tabs').tabs({ cache: true, spinner: '<img src="loading.gif" />' }); – Sherrilsherrill

do you mean that tabs are indexed starting with 1? Otherwise this code seems like it will never load tab 2 since you increment before calling load – Melodrama

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) {
        }
    }
});

Becky

Wouldn't this reload all the subsequent tabs every time you click on a different one? So say I go through the tabs one at a time. When I click the first tab, all tabs will be loaded. Then when I click the second tab, all tabs after 2 will be loaded again. – Unduly