How exactly does an image element's `complete` property work?

Question

I have ran into a bit of a problem with my understanding of the complete property.

I assumed complete would be true if the image has been downloaded and decoded correctly.

MDN says ...

True if the browser has fetched the image, and it is in a supported image type that was decoded without errors.

So, I assumed that checking an image's complete property before its load event had fired would return false (the image has not been fetched ). When isolating this in jsFiddle , I kept getting true when checking the property inside a script element just before the closing </body> tag.

I also experimented with changing the src attribute of the image and then immediately checking its complete property. I can see in the browser the complete is coming back as true even before the image has downloaded (I am looking at its progress via the Net panel in Firebug).

Is the behaviour I am expecting correct? Is there a way to get this to work as I expect?

Currently testing in Firefox 7.0.1. This may be a Firefox bug, but only have this other question as evidence.

Answer 1

From the w3c-docs

The IDL attribute complete must return true if any of the following conditions is true:

• The src attribute is omitted.
• The src attribute's value is the empty string.
• The final task that is queued by the networking task source once the resource has been fetched has been queued, but has not yet been run, and the img element is not in the broken state.
• The img element is completely available.

Sounds like the result is correct. Assuming the inital image is cached, then the image already has been fetched.
It doesn't have any effect to the complete-property when you change the src (queue another task)

I played around a little bit and it looks as if you get the expected result when you remove the src-attribute before setting the new src. Demo: http://jsfiddle.net/doktormolle/UNEF7/

Explanation: When no src-attribute is present the state of the image turns to "broken"(the 3rd condition will not match anymore) and it will not be complete before the new ressource has been loaded.

Answer 2

I've got the answer, but you're not going to like it...

When the image in question is created with document.createElement , it works. See http://jsfiddle.net/minitech/nmuQ8/

I discovered that this works while creating a test to see if it doesn't work, so so far I don't have a way to tell if the replacement is actually necessary, unfortunately.