jQuery: Wait for entire page--including ajax--to load?

Question

I'm using some jQuery tabs that load their content via ajax. I'm using $(document).ready() in conjunction with the following code:

// Hide loading animation, show content container
$("#content").show();
$("#loading").hide();

The purpose is to wait until the page is fully loaded, then show the content and hide the loading animation.

However, $(document).ready() only waits for the main page to load, not the external ajax content.

Is there something I can do wait until the ajax is loaded too?

Thanks in advance.

Answer 1

Depending on your ajax library, there is usually an option for supplying a callback which is called when the underlying ajax (get post..) operation is complete. You could use that callback to do your initialization rather than within .ready()....