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.
Here's some basic markup
Here's some basic markup
<div id="main">
<img src="https://getlevelten.com/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.