AJAX let's you show a nice loader when doing a XMLHttpRequest. It's great for the visitor, because it can see that something is loading. Bad thing for the web developer is, is that AJAX is hard to learn. So here's a small little CSS trick for some great user experience, making it look like you made an AJAX loader for images.

You can implement this on a web page with an image/photo gallery or to a page where you have to load big images, like wallpapers. It's very easy to set-up and implement to your site.

This technique doesn't work with any form of AJAX. It just emulates the style of loading, giving the visitor and indicator that there is activity going on.

Here is the basic markup of an image.

<img src="image.jpg" title="Image" alt="The image" width="400" height="300" />

And here is the CSS styling for the image.

img {
    background-color: #FFFFFF;
    background-image: url(loader.gif);
    background-repeat: no-repeat;
    background-position: center center;
}

This technique works best if you define the width and height of the image. Also, don't use transparent images, as the "loader.gif" will be seen in the background. What is does, is adding the "loader.gif" to the background of the img. Because this loader is smaller in file size, it will load and display faster than the big image.

Go to the demo page to see it working in action.

To get a loader / activity indicator, check Load Info, Ajax Load, Mentalized, Napyfab or Web Script Lab.

Interested in this topic? You might enjoy another article I've written called

• Experimenting with the element() CSS function
• Why you want to use the :any() CSS selector
• Webkit Bug: Hover and Sibling Selector
• Offline ways to keep your creative fluids going
• New CSS3 properties added to Firefox 3.6

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: