Preload jQuery UI tabs in background

Question

Everything,

How can I preload all tabs of the jQuery UI while loading the first tab? I tried the remote: true option, but it didn't work? When loading tabs, there should be ajax spinners next to each tab name.

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

Initializes tabs with a cache parameter so that the tabs do not reload after they have been loaded once. Then it detects the total number of tabs and sets the next tab to load as 1 (indexes are indexed starting at 0) Then it binds the event in the load event to start loading the next tab until it hits all of them. To launch it, it loads the second tab.

Answer 2

More elegant solution than higher:

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