DOM Scripting is a powerful technology but once you’ve been using it for a while, you’ll stumble across the elephant in the DOM living room: window.onload.
The Document Object Model, by definition, requires a document. If you attempt some DOM manipulation on an incomplete document, you’re going to run into problems. That’s why most DOM scripts are executed only when the document has finished loading.
On the one hand, we’re very fortunate that there is an onload event that is triggered by the window object when a document has finished loading. It’s the perfect safety mechanism: don’t try to manipulate a document until that event has fired.
On the other hand, it’s really annoying that we have to wait for that event to be triggered. That means waiting for the entire document and all its associated images to finish loading.
The result is something similar to the Flash Of Unstyled Content that can occur under certain circumstances with CSS. First, the document loads. Then, DOM Scripting is applied.
Personally, I’ve never had too many problems with this Flash Of Unmanipulated Content but that’s probably because I generally deal with fairly lightweight pages. It’s something that becomes more problematic as page weight increases.
Over at Web Graphics, there’s a nice round-up of some proposed techniques for dealing with this issue.
The round-up also deals with the fact that an event (like window.onload) can only have one function associated with it. That problem is easier to solve. I favour Simon Willison’s addLoadEvent function. It’s an elegant solution that makes plenty of appearances in the book.
For a more detailed look at all the issues associated with window.onload, be sure to follow all the links in Breaking onload limits.
Posted by Jeremy on Tuesday, August 30th, 2005 at 1:22am
Comments
I think it’s less annoying on content-centric website then in web applications with more heavy use of Javascript.
In later case you really don’t want to have UI changing significantly possibly under users cursor.
I still heretically believe that sometimes it makes sense to put Javascript onload handler on body tag and not to have all of Javascript in external files.
It might pollute file a bit, but it’s really not much worse than for example redundant xhtml elements to hang CSS on.
# Posted by Marko Samastur on Tuesday, August 30th, 2005 at 7:07am
Added this comment lower down unintentionally..
Jeremy, you mentioned the "flash of unstyled content" thing; but do you ever get a "styles not quite right" thing in Firefox, where if you hit "refresh" it puts itself right? I just got it looking at your site, so I thought I’d mention it!
To elaborate, sometimes your dashed line "strikes through" the title instead of being underneath it. May or may not be related to this: http://www.themaninblue.com/writing/perspective/2005/08/29/
# Posted by Tony B on Friday, September 2nd, 2005 at 1:10pm
Sorry. Comments are closed.