How to preload HTML tabs

[Giarc86]

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:

<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]

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.

 

[_kabal_]

Display:none and then "on document ready" display:block