14

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.

oshirowanen
  • 15,297
  • 82
  • 198
  • 350

3 Answers3

10

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"

Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
0

Yes onload

<body onload="load()">

That would detect when the contents of the body have loaded.

noel
  • 2,257
  • 3
  • 24
  • 39
  • 1
    I've just tried this with an alert in the onload. The alert appears before the page has finished loading/rendering. Closing the alert allows the rest of the page to finish loading/rendering, but it's still not right, as I want the alert to appear only after everything has finished loading on screen. – oshirowanen Sep 28 '12 at 07:56
  • You had the onload event attached to the body? – noel Sep 28 '12 at 07:59
  • I just tested it like this ` – oshirowanen Sep 28 '12 at 08:01
  • OK try [window.onload](http://stackoverflow.com/questions/588040/window-onload-vs-document-onload) instead – noel Sep 28 '12 at 08:05
  • Tried it and I get an error and the page does not finish loading. However, window.load works but it has the same problem as document.ready. – oshirowanen Sep 28 '12 at 08:15
  • Ok I just reread your OP and it look like you might want to look into a comet server like [APE](http://www.ape-project.org/) to get all of your required functionality. But I don't know maybe that's overkill for you. – noel Sep 28 '12 at 08:27
-2

$(document).ready

will help you to know when the dom has finished its event and its ready

Chandra Sekhar Walajapet
  • 2,534
  • 17
  • 24
  • I have all my ajax calls and jquery functions in $(document).ready(). Should I not have those in $(document).ready()? I've just tried moving everything out of $(document).ready() and just having a alert in $(document).ready(). The whole page only partially renders and I get an alert. Closing the alert does not finish off the loading of the page. – oshirowanen Sep 28 '12 at 07:57