Force IE8 to display ALT text while loading ?

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

Post 3+ Months Ago

I made the mistake of not testing the whole application in IE while I built it and now I have a tiny problem.

I'm generating an image dynamically, and I've designed the application to utilize the alt text of an image as the loading message while the server generates the image. For some reason IE8 (not sure about other versions) doesn't want to display the ALT text until I'm guessing it figures out that it can't load the image, which screws me up.

Anyone know of a way to force IE to display that alt text while the image is loading, or have suggestions on alternate simple ways to do a loading message that hides once the image is loaded ?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

From MSDN:

Quote:
The alt attribute is no longer displayed as the image tooltip when the browser is running in IE8 mode. Instead, the target of the longDesc attribute is used as the tooltip if present; otherwise, the title is displayed. The alt attribute is still used as the Microsoft Active Accessibility name, and the title attribute is used as the fallback name only if alt is not present.


Think you could use title/longDesc tag to get something loaded in?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

No go on those attributes either.

I'm going to luck out on this particular application because the image is displayed right above the part of the IE status bar where the "Loading Image" message displays with the URL. I think I can count on that working as an indicator in IE.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I am just taking a wild stab at this, have you tried using the "title" attribute on the image to see if that would do anything? For example:

Code: [ Select ]
<img src="blah.jpg" title="status message" alt="status message">
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

I think he tried that from the piece I gave BWM. Apparently that didn't work either.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Ahh yeah, all I saw was longDesc mentioned, after looking back I see you also mentioned title too. My bad ;)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Yeah it was a no-go on the title attribute as well.

I finally got around to installing Chrome on Vista here and apparently Chrome has the same behavior. In some instances Chrome doesn't even display the ALT text for a missing image if there's a width/height defined and that doesn't leave enough room for the text.

Looks like I'm going to have to come up with a different solution after all, Chrome doesn't display a loading message while the image is loading.

I think what I'm going to do, since the dimensions of the image will be available on the page, is give a containing div a background image that is an animated loading image and centered in the div, which will be set to the width/height of the expected image. When the image loads that background will be hidden.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Why the strike-through? Complications with that as well?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

After I posted it donned on me that the actual image element might always be covering the background of the containing div element.

I'm not sure if images are transparent while they're loading, whether they would be if the background of the img element were set to transparent, or really anything about it at all. I haven't tried it yet, so I just crossed it out in case anyone else wants to try, but it doesn't make it look like the solution. :)
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

why don't you set the image to display:none until its loaded? Then your background idea would work. Or are you not tracking actual load? If that won't work try background:none or background:transparent on the img. I'm pretty sure that will actually make the image invisible until its loaded.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

That's the catch. I've been trying to put something together that doesn't monitor the images loading status. I've always had trouble with getting a reliable status on images being loaded in the past so I've naturally tried to stay away from doing it.

It's been awhile now though, and I've actually already got jQuery at my disposal in this project. I suppose I should take another crack at monitoring the loading status of and image. I could spice it up a bit with jQuery and animation. I don't want to go overboard though, especially with something like a "lightbox" or "thickbox" or whatever it's called to display the preview in. I want to keep the application streamlines as much as I can. :)
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I gave it a quick test and this would make me think that simply adding a background image and setting the image background style to none should produce the result you want.

The top image in each case is a PNG and the second is a GIF. I assume that if the background shows through those that the same would be true while they're loading.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Here's the test I ran in my application.

JAVASCRIPT Code: [ Select ]
jQuery('#preview_image').html("
<div style='width:50px; height:50px; background-color:#f00;'>
   <img style='background:transparent;' alt='' src='" + url + "'/>
</div>
");
  1. jQuery('#preview_image').html("
  2. <div style='width:50px; height:50px; background-color:#f00;'>
  3.    <img style='background:transparent;' alt='' src='" + url + "'/>
  4. </div>
  5. ");


These are the browsers I tried it in.

Code: [ Select ]
Opera/9.80 (Windows NT 6.0; U; en) Presto/2.2.15 Version/10.00

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.21 Safari/532.0

Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.0.14) Gecko/2009090217 Ubuntu/9.04 (jaunty) Firefox/3.0.14

Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.2.15 Version/10.00
  1. Opera/9.80 (Windows NT 6.0; U; en) Presto/2.2.15 Version/10.00
  2. Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
  3. Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
  4. Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.21 Safari/532.0
  5. Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.0.14) Gecko/2009090217 Ubuntu/9.04 (jaunty) Firefox/3.0.14
  6. Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.2.15 Version/10.00


I need to use a blank alt attribute because Opera and Firefox will display that alt text over the containers background if I put anything in it.

It gives me something I can work with though. The red background displayed as expected while the server generated the image, then the image hid the background.

I think using a fixed width/height for the container is causing my footer to jump up and ignore the height of the loaded image due to overflows and whatnot. I'll have to see what swapping those out with min-height and min-width do.

I'm curious now looking back at your test code, why there's no width height defined anywhere ?

I'm having a tough time seeing your example work, I think the images load before I see what's going on. In my application, it takes the server a few seconds to generate the image so I get to look at it for awhile.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Seems like IE8 in Compatibility View quits animating a background GIF the second time my code block executes for a new preview.

Anyone else seeing that behavior ?

Not a huge problem since it animates the first time and a visitor would recognize the images on the second time, but I just know someone is going to notice it and file a bug report.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

If it works fine when not in compatibility view, you could disable compatibility view so that you do not have that problem by using this meta tag:

HTML Code: [ Select ]
<meta http-equiv="X-UA-Compatible" content="IE=8">

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 70 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.