Jquery Tabs - Delay before fully rendered, detect when rendered

Question

I'm using the tabs in jQuery UI : http://jqueryui.com/demos/tabs/

I've actually a lot of data in those tabs, so when the page is loading the data are completely messed up before the tabs are fully processed/rendered.

So i'm looking for a way to detect when the tabs are finished rendering probably with a callback function will be my guess. Like this i will be able to show a waiting message before the tabs are fully rendered.

Thanks !

Answer 1

We had the same problem at work, to be honest it can be an evident problem in most JQuery if you have loads of it on the page. To ensure that it's only shown when it's actually ready we initially hide the parent tab container like so:

<div id="tabs" style="display: none;">

then in the document.ready function after we've called .tabs, we then make it visible, like so:

$(function () {
    $("#tabs").tabs();

    $("#tabs").css("display", "block");
});

Answer 2

Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

You'll want this hidden by default, so you'd need to add this CSS:

#loading { display:none; }

You'd also want to setup the display for this too:

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
           background-image:url("transparentbg.png"); }

The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:

function showLoading() {
  $("#loading").show();
}

function hideLoading() {
  $("#loading").hide();
}

Now you can use this when you need to do something like querying an external page for data:

showLoading();
$.post("data.php", {var:"foo"}, function(results){
  $("content").append(results);
  hideLoading();
});

You can change out data.php for tab1.php, tab2.php, etc. linking to the appropriate php page for that tab.