Testing IMG Complete With No SRC Attribute
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.
Want to use code from this post? Check out the license.
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."
@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.
Another good read @Ben
@Alesei,
Thank you! I started thinking about this because I'm working on a IMG-related directive in AngularJS. Hopefully more to come soone.
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>
@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.
@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 :)
Waiting for the next post :)
@Ahmad,
I added some new AngularJS posts - hope you enjoy them :)
I am experiencing sort of a dilemma....
I get html fragments and try to remove what some sites call image spacer.
However, your technique is not working because the image they are adding has only the following markup:
<img height="1" alt="" width="1">
Since there are other images that have src and I need to keep, I am not being able to find a solution.
Can you provide some tips?!
Thanks