Detect when ALL HTML page rendering has taken place

Question

I am working with a pretty complicated .aspx page that is full of controls (Telerik, Ajax, etc.) that all expand, collapse, show, hide, etc. when the page is loaded. Since this rendering happens on the client-side and can take different lengths of time based on the users machine specs, is there a way to detect when all (or some) rendering has taken place (jQuery?) so I can then act on specific elements, knowing they are fully rendered?

Answer 1

I think the doc you need is:

http://docs.jquery.com/Events/load

Answer 2

"I can then act on specific elements, knowing they are fully rendered?"

You can use the load method (linked above) to attach to any element. So if you had a div with an id of "lastElement", you could write

$('div#lastElement).load(runThisFunction);

Answer 3

You should place your code inside the jQuery $(document).ready() function. This will ensure that all elements are loaded before the code runs.

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Answer 4

JavaScript is single threaded. The time passed to setTimeout is a minimum, but not a maximum, so if you pass something like 10(ms), you essentially are saying "execute this code after all the currently running code is finished."

So, if all the controls use $(document).ready() to do their thing, all you need is:

$(document).ready(function() {
    setTimeout(function() {
        doStuff();
    },10);
});

doStuff will be called after all the functions passed to $(document).ready have run. However, this isn't foolproof. If the controls have their own way of detecting whether the document has loaded, or do their own setTimeout(), you're in trouble. The problem is that JavaScript does not guarantee the execution order of setTimeouts. Sometimes your code may run last, other times it may run before the setTimeouts used for the animation.

One last idea: if all the animation is done using jQuery, then the effects run in a single queue. In doStuff you could add an animation of some sort with a callback and be reasonably certain that the callback would run last.

Answer 5

Whenever I had to wait for multiple things to be ready before proceeding, I would create an array with true/false values. Every mandatory part of the page got an event which, when it is called, updates the specific entry in the array to true. Also, it called a general function which returned true if all values in an array was true, otherwise false.

If that function finally returned true, I would proceed with the execution. It is especially useful if you have to wait for an AJAX call to end but don't want to use async = true. It also is useful if you want to start loading multiple things at once instead of one after another, since they all report ready-state to the same array.

It does however use global variables so you might need to do some optimizations. You might not want to do this approach either if you have a grudge against global variables.