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.

Improve this question
0

3 Answers 3

Reset to default
11

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:

  1. What jQuery calls $(document).ready()
    which means the DOM is ready for manipulation (before images load and after external scripts and CSS are loaded)

  2. 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"

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Yes onload

<body onload="load()">

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

Improve this answer

6 Comments

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.
You had the onload event attached to the body?
I just tested it like this <body onload="alert('Loaded');".
OK try window.onload instead
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.
|
-2

$(document).ready

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

Improve this answer

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.