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.
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.
Share Improve this question edited Sep 28, 2012 at 7:45 oshirowanen asked Sep 28, 2012 at 7:33 oshirowanenoshirowanen 15.9k83 gold badges203 silver badges356 bronze badges 1- 2 It would be nice to know why this question has received negative votes. – oshirowanen Commented Oct 8, 2012 at 15:45
3 Answers
Reset to default 10The 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"
Yes onload
<body onload="load()">
That would detect when the contents of the body have loaded.
$(document).ready
will help you to know when the dom has finished its event and its ready