Question

Is it possible to detect when HTML has finished loading AND rendering on the page? If so, how?

The page consists of HTML, calls to ajax, receives data back from ajax calls, lots of javascript stuff and some images too. I would like to detect when everything has finished. What I can’t do is stick a function call at the end, because I don’t know when the end is.

For example, the page has lots of ajax style elements which users can pick and choose from, i.e. user 1 might have a different number of elements than user 2 and even in a different order.

So what I can’t do is use the last function to simulate the end of HTML rendering, because I won’t know which function will be the last function.

Answer 1

The problem with answering your question is in the last few sentences where you say that you don’t know where the end is because of user choices. There are two automatic events you can bind JavaScript to. What jQuery calls $(document).ready() which means the DOM is ready for manipulation (before images load and after external scripts and CSS are loaded) and what is more commonly called body onload (in jQuery this can be written as $(window).load()) which runs after all static assets are fetched. Your Ajax calls will all fire after at least the DOM is ready and there is no defined event for what happens after all of them. For that you need to keep track of them on your own. You could use a “last horse out of the barn” approach. Add a small bit of logic to the end of your Ajax calls to see if it is the last and raise a custom event called “reallyAllDone”