This is just a nifty little trick to add a simple ajax-style loader graphic to your images. It gives the vistor a visual indication that the images are still loading. 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
<img src=”images/something.jpg” alt=”something” title=”image1″ width=”450″ height=”300″ />
and here’s the CSS needed to add the loader image…
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. Also, this isn’t really a good choice for images with transparency since the loader image would still be visible in the background.
You can create some custom ajax-style downloder images at the AjaxLoad website.