How Exactly Does An Image Element's `complete` Property Work?

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

Solution 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.

Solution 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.