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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With