How to preload HTML tabs

PseudZ

Expert Member
Joined
May 28, 2008
Messages
1,217
#1
Hi all,

I have a HTML/CSS/Javascript content tab system that I am using and a problem I am having is that while the page is loading it shows all the content on the page at once, only once the page has finished loading does it put it into the tabs.

Now I know one can load say just the first tab, and then load the other tabs once the page has loaded but I am not sure how to go about that.

I have tried using:

Code:
<script type="text/javascript">
$(function(){
    setTimeout(function(){
        $( "#tabcontent" ).tabs();  
        $('#page-2').show();
    }, 3000);
});
</script>
But I am not sure if this is 100% correct or even the correct way to do this. I just tried with a few Google suggestions. I can post the HTML if need be.

Any help will be appreciated.

Thanks!
 

ZAFluffyBunny

Well-Known Member
Joined
Sep 23, 2010
Messages
375
#2
Depending on how long it takes to load the page the solution is as simple as hiding everything until the page load has completed. Show a loading indicator while the page is loading.

On the other hand. I take it the tab contents are in divs? Make the div you do not want to see visibly hidden or the display none, depending what the library is expecting.
 
Top