Question

I’m making a small javascript framework, for a variety of reasons, including learning.

Hence, I wanted to implement “document ready” functionality, and so I went to check how jQuery fakes DOMContentLoaded on IE < 9.

Problem is, it doesn’t seem to be working the way it should. Check this fiddle in IE8 and a good browser.

The logic is: apply css to make a div start red, then on “ready” make it blue, and on load make it green. Additionally, there are three img tags with fake URLs just so there is a synthetic lag between ready and load.

What should happen:
The div shouldn’t be shown red for more than a split second, if at all. Ideally, the first thing seen should be blue. Then, when the browser times out on the invalid images, green.

What happens on IE8:
The div remains red until all images “load” (in this synthetic example, timeout), then goes green.

Again, I’m not exactly asking for a fix, I’m asking if it is the right thing for a framework to behave like this on IE8 (I don’t care about IE 6-7 anymore), or if this is happening due to me misusing jQuery in some way.

P.S.: I know how to bind an event manually, I’m asking more about if this is expected/acceptable/a bug/my mistake.

Answer 1

I’m going to go with working as intended.

jQuery is using the document.readyState for browsers that don’t support DOMContentLoaded. document.readyState only equals complete when the page’s resources are done loading.

https://developer.mozilla.org/en-US/docs/DOM/document.readyState

There’s probably a good reason why they aren’t doing it on “interactive”, but I’m not positive on that.

Edit: Here’s your updated fiddle with a event on document.readyState == interactive

http://jsfiddle.net/PFWmS/7/

It works in both IE7 and IE8

Edit

The reason that jQuery doesn’t use “interactive” is because that fires too early in IE9.

http://bugs.jquery.com/ticket/12282#comment:25

I’m thinking there may be a better way of handling that which results in IE7 and 8 proper ready timing while still working properly in IE9