JavaScript separation and the window.onload problem

written by Craig, 6 February 2007

Separating web page content (XHTML), layout (CSS), and behaviour (JavaScript) should be the goal for all decent web developers. It can be difficult to comprehend when you’re learning about web technology, but it makes your code clean and maintainable.

When is JavaScript run?

When you include or embed JavaScript in a page, code that exists outside of functions is run at that point. Since the remainder of the page has not loaded, your options are limited: for example, it is not possible to locate and manipulate a DOM element because it will not necessarily be available.

To solve this problem, we define an event which fires as soon as the page has loaded, for example: window.onload = RunMyCode;

The JavaScript can then apply lots of lovely effects safe in the knowledge that the page has fully loaded and the DOM is available.

The onload problem

Until the page has fully loaded, no progressive enhancement can be applied. This could be a problem if you have a slow connection or lots of content and images: the user is able to interact with the page before loading is complete and before any enhancements are applied.

Several workarounds are summarised in Peter Michaux’s excellent window.onload article. The solutions range from inline scripts at the bottom of the page to timers that periodically check for the availability of DOM elements.

The onload workarounds and their problems!

The proposed solutions are certainly clever, but none of them really feel right to me:

  • Manipulating DOM elements before the page has loaded is risky: there will still be limits to what you can achieve.
  • Testing and debugging multiple browsers will be more difficult. Events could fire at unknown times and not necessarily in the order you expect.
  • More JavaScript code is required, it increases complexity, and page load times are increased.

Revisiting the original issue

Users can interact with a page before it had fully loaded, but should this be an issue? Personally, I prefer a much simpler solution:

  1. Use progressive enhancement. If a page works without JavaScript, then it will still work before the window.onload event has fired.
  2. Use concise, semantic XHTML. Ensure the page size is small so the onload event fires as quickly as possible.
  3. Where necessary, specify images within CSS. Element backgrounds can be downloaded after the window.onload event has fired.
  4. If all else fails, hide your enhancements. If your widget absolutely requires JavaScript, then hide it using CSS (e.g. display:none). Once the page has loaded, your JavaScript can check for the hidden element and enable it as necessary.

Am I being overly cautious or simplistic? Does anyone have any further ideas?

add your comments
please enter your name
please enter your email address - it will not be published anywhere
please enter your website address
please enter your comments (all are moderated and checked for spam)