Monday, February 5th, 2007

The window.onload problem revisited

Category: JavaScript

Peter Michaux has written a detailed post on the window.onload problem:

The goal of unobtrusive JavaScript programming it to separate the JavaScript behavior from from the HTML content and is analogous to the goal of unobtrusive CSS design to separate the CSS presentation from the HTML content. Separation of presentation and content has been possible for years but there is one wrinkle standing in the way of completely separating the behavior. This article is about previously suggested techniques to enable this separation, their problems and a new option that combines the strengths of the current techniques with an extra bonus into a new robust solution.

Peter goes into detail on the various tricks and hacks that differ between browsers in many cases.

He discusses:

  • Just putting a script tag where you need it
  • DOMContentLoaded for some browsers
  • script tag with an onreadystatechange
  • document.readyState
  • DOM Polling (e.g. YUI event library)

Summary

Event handler attributes in the HTML are the most robust but do not allow separation of concerns.

The bottom script technique works cross browser based on de facto standard browser behavior but has a compromise in separation of concerns. Must remember to put the JavaScript element at the bottom of each page.

Dean Edwards script allows for complete separation but is brittle when looking towards the future. Old and exotic browsers will not enliven a page until window.onload.

DOM polling is cross browser, robust and allows for complete separation of concerns. In extremely rare cases a dummy element can help the code know that content is available.

The Fork JavaScript library svn trunk now implements DOM polling with DOMContentloaded and window.onload fallbacks as well as the ancestor walk as discussed. These features will be part of Fork release 0.2.0.

Posted by Dion Almaer at 8:04 am
7 Comments

+++--
3.1 rating from 48 votes

7 Comments »

Comments feed TrackBack URI

This is a great article. I was just thinking about this today, so particularly timely.
Is Fork worth a try. Anyone much experinece with it?

Comment by ajaxianfading — February 5, 2007

I’ve writed a cake recipe about window.onload based on Dean Edwards post.

U can see it in http://wws.x4u.com.br (language: brazilian portuguese)

;)

Comment by Jr. — February 5, 2007

I have a Prototype fix for Event.observe(document, ‘DOMContentLoaded’, observer);

I also have it enforce that the onloads arent called until the domload calls are complete and fix the issue where IE calls multiple window.onresize when you just resize it once. It also enforces first in first out for observers, which IE seems to lack. It is heavily based on Andrea Giammarchi’s fix (which is based on Dean Edwards) for the DOMContentLoaded compat.

I really need a blog heheh alas, no time!

Comment by JD — February 5, 2007

The final solution he listed “onAvailable” and “onContentReady” are not the best solutions. I use YUI extensively, and I have abandoned both. Why?

The reason is in IE, polling can catch the document in an interactive state (read-only), which causes IE throw very strange errors when you try to modify the DOM. Unfortunately testing the readyState of the document won’t solve the problem, because by the time it’s readyState is complete, onload has fired.

Dean Edwards script defer solution is still the best for IE as it gets the document at a point between interactive and complete, something that you can’t reliably do without it.

Comment by Jack Slocum — February 5, 2007

The window.load example in the scripts not work in the IE whit a TAG example

mesaje!

// create a unique image source so that this page works with continued testing
var src = “http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?” + Number(new Date);
//var src = “84857main_EC04-0325-23_lg.jpg?” + Number(new Date);
document.write(“”);

Comment by lanetas — February 7, 2007

Sorry the editor remove the html tags!
The window.load example in the scripts not work in the IE whit a IFRAME TAG example,
<head>
<!–
scripts por window.onload
–>
</head>

<body>
  <iframe src=”http://www.???.com/largedata.php”>
</iframe> <script type=”text/javascript”> var src = “http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?”
+ Number(new Date);
document.write(“<img src=” + src + ” height=240 width=300>”); </script>
</body>

Comment by lanetas — February 7, 2007

Sorry, the editor remove the tags.
The window.load example in the scripts not work in the IE whit a IFRAME TAG example

<head>
<!–
scripts por window.onload
–>
</head>

<body>

  <iframe src=”http://www.???.com/largedata.php”>
</iframe> <script type=”text/javascript”> var src = “http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?”
+ Number(new Date);
document.write(“<img src=” + src + ” height=240 width=300>”); </script>
</body>

Comment by lanetas — February 7, 2007

Leave a comment

You must be logged in to post a comment.