Handling Missing Images

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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: [ 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: [ 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. />
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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

CSS Code: [ 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
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

joebert wrote:
I've been watching the House timer for a week now. ;)


snakesonacane dot com
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

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!
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 30 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.