Ajax Style Image Loaders With CSS

This is just a nifty little trick to add a simple ajax-style loader graphic to your images. It works great for image galleries or anywhere it might take a few seconds for an image to load initially. It's all done with a little css and takes just a couple of minutes to do.

http://www.leveltendesign.com/blogdemos/cssajax/ajax-loader2.gif); background-repeat:no-repeat; background-position:center center; border:1px solid #EEE;" />

Here's some basic markup

<div id="main">
<img src="images/something.jpg" alt="image1" title="image1" width="320" height="240" />
</div>

and here's the CSS needed to add the loader image...

#main img {
    background-color:#FFF;
    background-image:url(images/ajax-loader.gif);
    background-repeat:no-repeat;
    background-position: center center;
}

That's pretty much it. It really works best when you define the height and width of the image in the markup or else with CSS.

Click Here for A Demo

You can find some nifty ajax-style downloder images at the AjaxLoad website.