Emulate Ajax Image Loading with CSS

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.

ajax style loader

Here’s some basic markup

<div id=”main”>
<img src=”images/something.jpg” alt=”something” title=”image1″ width=”450″ height=”300″ />
</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. Also, this isn’t really a good choice for images with transparency since the loader image would still be visible in the background.

Click Here to See the Demo Page

You can create some custom ajax-style downloder images at the AjaxLoad website.

24 thoughts on “Emulate Ajax Image Loading with CSS”

  1. cool.. have a lot and more creativities and imaginary.. things… brilliant… ! nice…

    i like your style… ^^

  2. Nice Trick , but i think there is no Ajax Involved , it is simple CSS , you applied the Background image on Table Cells :) , Good

  3. Hmmm. You think? That’s exactly the point, hence the post about emulating the ajax style loaders. No ajax, just a nice way to stick some little loader images in with CSS.

  4. Perhaps I’m wrong..but wouldn’t this in fact use more bandwidth and slow down the loading process of multiple images by now instead of displaying a single image, you are displaying two (loading image and actual image).

    Or is that just me?

  5. You would in theory choose a very small loader gif image for the background, which you would apply to all the images via the CSS. Essentially, you’re just loading one small image in addtion to the others so there shouldn’t be any bandwith concerns or other performance problems.

  6. I am using Mozilla Firefox 2.0.0.10 under Gnome Desktop Environment on Fedora 8. When I opened this page (more precisely viewing “LOADING” demo frame) the X sucked my CPU resources ( almost 100% CPU usage).

    Maybe problem with firefox and X, maybe NOT?! I don’t know, just sharing my experience with this CSS stuff!

  7. Great trick, not sure why I hadn’t thought of doing that before… I love to make things look complex when they in fact are not. I implemented this in a matter of about 5 minutes or less, impacting litterally thousands of thumbnails and images, not all on one page of course…

Comments are closed.