Force IE8 to display ALT text while loading ?

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 ?

From MSDN:



Think you could use title/longDesc tag to get something loaded in?

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.

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:

I think he tried that from the piece I gave BWM. Apparently that didn't work either.

Ahh yeah, all I saw was longDesc mentioned, after looking back I see you also mentioned title too. My bad

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.

Why the strike-through? Complications with that as well?

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.

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.

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.

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.

Here's the test I ran in my application.



These are the browsers I tried it in.



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.

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.

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: