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

• Browser size aware content scaling
• 8 different ways to beautifully style your lists
• CSS trick: Debug your HTML and CSS
• Create a better jQuery stylesheet switcher
• All about CSS-Tricks and more with Chris Coyier

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

Spread the word and submit to:

Comments

Add New Search RSS

Black Velvet Design - Really good   2007-11-07 15:54:39 A very good trip, I considere it in the future for my proyects. Reply | Quote

Levi Page - One Small Issue   2008-06-06 06:35:00 Great trick, but one small problem I can't seem to find an answer for... It only works once the loader gif has been loaded into the cache. In other words... I don't get the animation until I go to a second page. Even though the loader gif is used towards the top of the page, none of the images on the first page display the loader. I guess I could try a hidden div with the loader towards the top. Any ideas? Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Unsubscribe from e-mail notifications.