When it comes to IMG DOM (Document Object Model) nodes, you can programmatically test to see if an image has loaded by examining its "complete" property. This is a boolean value that indicates whether or not the image has fully loaded the resource defined by its "src" property. But what about an IMG node that don't have a defined "src" property? Are they complete?
To test this, I put together a tiny demo that looked at IMG objects defined in the DOM tree as well IMG objects defined as detached DOM nodes:
When I run this code in Firefox, Chrome, and Safari, I get the following output:
However, when I run this code in IE (Internet Explorer), I get the following output:
Why does this not surprise me?
For all the modern browsers, an image with no SRC is complete. Philosophically, I think this makes sense; if there is nothing to load, then the load process is complete. But, according to IE, an image with no SRC is not complete - is not loaded.
For the vast majority of developers, this probably makes no difference one way or the other; but, in an AngularJS context, where you can create custom directives that programmatically interact with IMG SRC attributes and visual state, this kind of scenario becomes a lot more meaningful - but that's another blog post altogether.
Want to use code from this post? Check out the license.