Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the Nylon Technology Christmas Party (Dec. 2008) with: Simon Free

Testing IMG Complete With No SRC Attribute

By Ben Nadel on

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:

  • <!doctype html>
  • <html>
  • <head>
  • <title>
  • Testing IMG Complete With No Source Attribute
  • </title>
  • </head>
  • <body>
  •  
  • <!-- IMG tag with no SRC attribute. -->
  • <img id="noSrcImage" />
  •  
  •  
  • <!-- Load jQuery from the CDN. -->
  • <script
  • type="text/javascript"
  • src="//code.jquery.com/jquery-2.0.0.min.js">
  • </script>
  • <script type="text/javascript">
  •  
  • // Get the image from the document.
  • var img = document.getElementById( "noSrcImage" );
  •  
  • // Build an image from scratch.
  • var scratch = new Image();
  •  
  • // Test both images for "completeness."
  • console.log( img.complete, scratch.complete );
  •  
  • </script>
  •  
  • </body>
  • </html>

When I run this code in Firefox, Chrome, and Safari, I get the following output:

true true

However, when I run this code in IE (Internet Explorer), I get the following output:

false false

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.

Tweet This Titillating read by @BenNadel - Testing IMG Complete With No SRC Attribute Thanks my man — you rock the party that rocks the body!



Reader Comments

Aren't SRC and ALT attributes required for the IMG tag?

I've only been able to find the requirement listed here:
http://www.w3schools.com/tags/tag_img.asp
but it doesn't appear to be mentioned here:
http://dev.w3.org/html5/markup/img.html

I copied your sample code and pasted it into the W3C validator and it reported that the IMG tags were invalid:
http://validator.w3.org/#validate-by-input
"Element img is missing required attribute src."
"An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images."

Reply to this Comment

@James,

That's a good question. I'm not sure how to answer. After all, you can programmatically instantiate an IMG dom node without giving it a SRC properly. So, form a DOM standpoint, I'd say that it's valid. But, from an HTML standpoint, that's another question altogether.

And, like I said in the post, this probably won't matter in the vast majority of cases. I've been doing a lot of AngularJS lately, and have dealt with custom directives that interact with images. Knowing whether an IMG has been loaded can be important for those outliers.

Reply to this Comment

@Alesei,

Thank you! I started thinking about this because I'm working on a IMG-related directive in AngularJS. Hopefully more to come soone.

Reply to this Comment

In a phrase I use rarely and with great caution, I tend to agree with IE on this one.

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.

If the image cannot load because of an invalid src, then "complete" should never be true. An invalid src is one that does not point to a valid image file.

Realistically, they're both true. Depending on how you look at it. One definition clearly references when the tag has completed rendering and the other references when the image is done rendering. That's why definitions are so important.

<ShamelessPlug>Just this morning, I posted an article on the importance on agreeing on definitions before beginning any work.</ShamelessPlug>

Reply to this Comment

@James,

According to the w3.org link, SRC is required and ALT is not. On that page, the SRC attribute has a little star next to it. If you hover over that, it says that the attribute is required.

Reply to this Comment

@Matt,

Yeah, I can definitely see it from both sides. As much as no-source can feel like it has loaded, I can also see it like a Object that has been instantiated but not "invoked" yet :)

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.