2

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.

Camilo Martin
  • 37,236
  • 20
  • 111
  • 154

1 Answers1

5

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

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • Kudos man! So it should check for `interactive`. Now, I'm not sure what to make of this, they just "dropped support" for IE8? – Camilo Martin Oct 03 '12 at 19:24
  • I'm accepting the answer (and +1) because what you found can get me started, but I'm still curious about this built-in behavior of jQuery. – Camilo Martin Oct 03 '12 at 19:26
  • I expect this to not be a problem with the next version of jQuery due to the planned 1.9oldIE vs 2.0modern split. – Kevin B Oct 03 '12 at 19:27
  • Whoa, so they will split the source? That's news to me! And it was time already, I'm confident jQuery could be a hell of a lot faster if it depended on only modern features of ES5 and the like. Sorta like [Zepto](http://zeptojs.com/). – Camilo Martin Oct 03 '12 at 19:30
  • Interesting... It seems like it's always worked this way, even in jQuery 1.6.4 IE7 and 8 don't fire ready event until after the images have failed to load. – Kevin B Oct 03 '12 at 19:37
  • That is quite weird... I'm going to with "shouldn't be like this" and listen to interactive on IE < 9 (since IE9 has `DOMContentLoaded`). By the way, this is completely unintuitive to me. Why doesn't jQuery do that? – Camilo Martin Oct 03 '12 at 19:50
  • I was digging through old tickets and found this: http://bugs.jquery.com/ticket/1320 – Kevin B Oct 03 '12 at 20:15
  • Interesting, but it refers to firing too soon, right? In this case it fires too late. And, your fix seems to just work correctly. – Camilo Martin Oct 03 '12 at 21:15