Wednesday, 11 November 2009

IE 7 and dom:loaded

We recently hit a very annoying bug/feature that we could only see in IE7. The page works fine normally but in IE 7 we got javascript errors saying objects were not defined.

The page looks something like

<head>
<script src="ourcorescripts.js/>
</head>
<body>
// Some stuff
<script>
document.observe("dom:loaded") = function(){
// do stuff
}
</script>
</body>


What happens is in IE7 (sometimes) the event handler fires and objects defined in 'ourframework.js' are not ready yet. A similar problem was noted by Atlassian - their solution was to use window:load. This didn't really work for us as it is a bit too late as we want some of our logic to load sooner.

What seems to be happening is in IE 7 it is firing dom:loaded before it has finished parsing all of the JavaScript files. This seems odd as it doesn't happen in any other browser. Looking into this further it comes to light dom:loaded is not actually an IE 7 feature but is simulated by prototype. Prototype uses
code that registered a 'deferred' script to fire the event. For some reason in IE 7 this doesn't seem to always work.

Our solution was more low tech. We simply fired another event my:dom:loaded from the footer and listened to that instead. This solved the problem and seems to fire nearly as soon as dom:loaded.

1 comments:

ronman said...

Just found this fix for the IE dom:loaded bug. Just wanted to say thanks. It saved my ass.