written by craig, 6 February 2007
To solve this problem, we define an event which fires as soon as the page has loaded, for example:
window.onload = RunMyCode;
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.
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:
- Use concise, semantic XHTML. Ensure the page size is small so the onload event fires as quickly as possible.
- Where necessary, specify images within CSS. Element backgrounds can be downloaded after the window.onload event has fired.
Am I being overly cautious or simplistic? Does anyone have any further ideas?