ansaurus

Question

Answer 1

+1 A:

You can bind an event to be fired when the DOM tree is ready, which will generally be before the page is displayed.

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

I use this for unobtrusive javascript to start changing the page ASAP, so the user doesn't see any changes due to the javascript.

Edit: There is another solution, which isn't ideal, but can work. Have the main div be hidden, so nothing gets displayed, until the DOM tree is finished, and the javascript changes the main div to be visible.

The other option is to put the javascript at the end of the html, and have it immediately set the color, but this is very much a timing solution.

James Black 2009-09-04 21:29:34

sorry, but you're wrong: in most cases, the browser will start rendering the page *before* `DOMContentLoaded` (or equivalent hacks) fires; you can even delay the event by an arbitrary amount of time by using chunked transfers (PHP example: add `flush();sleep(42);` before the closing `</body>`)

Christoph 2009-09-04 21:35:40

Thats what I did, but that means that the body was loaded already which gives this white background for a second :(

2009-09-04 21:37:41

I am used to having tables or images, something that slows down rendering, so I haven't had a situation where the page gets rendered before the DOM tree is finished.

James Black 2009-09-04 23:02:30

Answer 2

+1 A:

In most cases, using DOMContentLoaded (or the equivalent hacks) is sufficient. It's problematic if the parsing of the HTML code is delayed (eg because of server- or clientside computations or a slow connection) or - as in your case - undesired visual effects; I wrote about this problem in regards to chunked transfers some time ago.

You should experience the least time lag by adding script elements to the body directly after the involved elements (see this question as to when this is problematic).

Your example of changing the body's colour would look like this:

<body>
 <script type="text/javascript">
 document.body.style.background = 'green';
 </script>

Christoph 2009-09-04 21:47:26

ansaurus

tags:

views:

answers:

page elements loaded before script

related questions