Please HELP! HTML Loading image for HTML Code [Archive]

Joseph.w.s

12-04-2009, 11:49 AM

Hi All thats my first post on this forum.

I really want your help because I am confusing about this. I have a problem and I'll explain it now in short words.

I have a XHTML Code containg an image like this one here :

<img src="http://farm3.static.flickr.com/2621/4053328414_e08f43660a_o.png"/>
I know this photo is small image and will load Fast but its only an example.

The problem is I don't know how to make a Loading GIF image appears before it like an (Ajax loader) just for telling the user to wait until the photo loads and appear to him Like this one:

http://www.blueicestudios.com/ajax/images/ajax-loader.gif

So Please if any one know the HTML Code for this loader please type it for me and show me how to put my (HTML Code) and the (Loading .gif) link.

it will be a Great appreciate.
Thank you very much,

Apostropartheid

12-04-2009, 05:54 PM

Possibly something like this:

<!doctype html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
.image-container {
background: url(loading.gif) center center no-repeat;
}
img {
display: block;
}
</style>
</head>
<body>
<div class="image-container">
<img src="http://farm3.static.flickr.com/2621/4053328414_e08f43660a_o.png"/>
</div>
</body>
</html>

It seems unnecessary to me, though: users already know that they have to wait for images to load. They've been doing so since the beginning of the internet.