Handling Missing Images

[joebert]

September 16th, 2009, 9:34 pm

Why don't <img> elements have an "altimage" attribute ?

If you've got partner button images or something along those lines, the alt text being displayed usually looks horrible if the other site has an intermittent downtime or the visitor otherwise has something wrong between them and that site.

altimg would make it possible to define a fallback image, and keep the alt attribute for screen readers/etc.

HTML Code: [ Download ] [ Select ]

<img
   src="http://other-domain.com/image.jpg"
   altimg="./missing.jpg"
   alt="Image"
   width="100"
   height="30"
/>

1. <img
2.    src="http://other-domain.com/image.jpg"
3.    altimg="./missing.jpg"
4.    alt="Image"
5.    width="100"
6.    height="30"
7. />

Why don't <img> elements have a "missing" attribute ?

Maybe you just want to omit any reference to the image at all if it can't be found. As if it hadn't been added to the page in the first place. Or, if your layout depends on the image being there, and you've defined your width/height treat it like it's an image with a visibility of hidden.

The default value for such an attribute, as well as a valid value to be used, would be "alt" where the alt text displays. You could also use "hidden" or "nodisplay" to hide the eyesore.

HTML Code: [ Download ] [ Select ]

<img
   src="http://domain.com/image.jpg"
   alt="for screen readers"
   missing="alt|hidden|nodisplay"
   width="100"
   height="30"
/>

1. <img
2.    src="http://domain.com/image.jpg"
3.    alt="for screen readers"
4.    missing="alt|hidden|nodisplay"
5.    width="100"
6.    height="30"
7. />

September 17th, 2009, 10:23 am

I like both of those ideas, I don't know why they don't have something like them.

altimage

That's a cool idea, especially for 404/dynamic imaging.

Not sure if they have this already, but what about providing multiple src="" attributes, or src="domain.com/1.jpg<delimiter>domain.com/2.jpg<delimiter>domain.com/3.jpg", then let the browser use whatever image is available first?

missing

It sounds to me that "missing" should be more of a CSS thing. I'd say to have CSS recommend to the browser how it should display missing images or specific missing images.


Very cool Dr. House, oh BTW, first House MD episode of the season is this coming Monday (September 21st 2009).

[joebert]

September 17th, 2009, 10:43 am

I think you're right, missing would make a better CSS rule, pseudo-selector even.

CSS Code: [ Download ] [ Select ]

img:missing
{
   display:none;
}

1. img:missing
2. {
3.    display:none;
4. }

I've been watching the House timer for a week now.

[natas]

September 18th, 2009, 12:14 pm

joebert wrote:

I've been watching the House timer for a week now.

snakesonacane dot com

[mk27]

September 19th, 2009, 11:53 am

Hmmm. For altimage/missing, you could load with js and set a timer on .complete -- if it doesn't happen, go with some alternate.

Write that function once, use it forever!

September 21st, 2009, 8:15 am

mk27 wrote:

Hmmm. For altimage/missing, you could load with js and set a timer on .complete -- if it doesn't happen, go with some alternate.

Write that function once, use it forever!

Okay so can anyone make it? (I need to look at JS my understanding of it is very limited)

[mk27]

September 23rd, 2009, 5:45 pm

tastysite wrote:

Okay so can anyone make it? (I need to look at JS my understanding of it is very limited)

If you investigate the .complete method of a js Image object, and setTimer(), you may hopefully recognize this is not a difficult task. You just need to decide how long is too long.

.onload may be better. It fires early (eg, before the image is completely loaded) BUT I think it will only fire if there is something that is loading, so in that case you would not have to fret about how long is too long.