wait for image to download

[quickcur]

Hi,

I have a html which have a <img> tag. Since it takes quite some time to
download the image when user visit the page, I would like to show a
small animation at the same location of the <img> first. When the image
is totally downloaded, I would like to discard the animation and
display the image at the same location. How can I do it?

Thanks,

qq

 

[Randy Webb]

(e-mail address removed) said the following on 7/7/2006 10:01 PM:

Hi,

I have a html which have a <img> tag. Since it takes quite some time to
download the image when user visit the page, I would like to show a
small animation at the same location of the <img> first. When the image
is totally downloaded, I would like to discard the animation and
display the image at the same location. How can I do it?

Use two images. The animation and the large one. Center the animation on
the large one. Hide the large one using CSS. Use the onload event for
the page to trigger a function that will hide the animation and display
the larger image.

 

[Danny]

Put your <img> in a <span style="background: url(smaller-image.gif);min-width:
100px;min-height: 100px"> element, and put your <img> in it, the small one, as the bgimage of
the <span> will show, as it'd be responded quicker from the server, will show in the
background, until the big image is fully loaded. You could give the bgimage a
background-position, so it shows at the bottom in order to have it there till the bigger image
covers it.

Danny