Can css tell if an image "has layout"?
You do realize that "haslayout" is an IE specific property don't you. When using that term we are only talking about IE, specifically IE7 and under.
However, the end user has to load those images themselves. Otherwise the slider just presents a broken image icon.
That's going to be the case with any image in the html. The only time they are going to get a missing image is if you have a wrong file path, the image is not on your server, or they have images turned off. If it is the later then the missing image icon is normal for them.
So my question is if its possible to determine with css whether an img element's src attribute actually is present and has intrinsic physical layout properties?
As long as you have defined your width/height attributes then the space will be preserved (in all but FF) even if the image does not load. To make FF honor the missing image dimensions you would need to change the img display to either block or inline-block in the css.
If so, I can use that to conditionally hide the image so that a broken image icon does not appear (or preferably a stub icon that helps the end user understand they need to upload the missing image or remove it from the markup
Your stylesheet (css) is not going to know if the image did not get loaded, it has no way of knowing that.
If you were to try and hide the image with css you would be hiding it in all scenarios, whether it loaded or it didn't load.
The users can't remove a missing image from your markup. That is, if your talking about the user being a visitor to your site. If your talking about the user being someone that has access to edit your html then that's different. I may be misunderstanding you there.
I see no way of removing the missing image icon from chrome and IE.
Here is how you would maintain the dimensions when the image is missing though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<img src="imgs/foo.jpg" alt="missing image" width="200" height="100">