Emulate Ajax Image Loading with CSS

Posted on July 21, 2007

(70 votes, average: 4.24 out of 5)

Loading ...

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.

stumbleupon:Emulate Ajax Image Loading with CSS

del.icio.us:Emulate Ajax Image Loading with CSS

digg:Emulate Ajax Image Loading with CSS

newsvine:Emulate Ajax Image Loading with CSS

blinklist:Emulate Ajax Image Loading with CSS

furl:Emulate Ajax Image Loading with CSS

reddit:Emulate Ajax Image Loading with CSS

fark:Emulate Ajax Image Loading with CSS

blogmarks:Emulate Ajax Image Loading with CSS

magnolia:Emulate Ajax Image Loading with CSS

Print This Post

Comments

24 Comments so far - comments are now closed.

on July 21, 2007

University Update - AJAX - Emuate Ajax Image Loading with CSS said:

[...] Link to Article ajax Emuate Ajax Image Loading with CSS » Posted at 404 Creative Studio | [...]
on July 31, 2007

Hermawan said:

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

i like your style… ^^
on August 15, 2007

c00lryguy said:

Awesome stuff dude, love to keep things simple like this.
on August 16, 2007

Lamiseaunet said:

Well done ! It so simple, as usual good ideas.
on August 16, 2007

Fast Stumbleupon Stumbles said:

Do you see the image partially loading, i.e. is it all or nothing?
on August 17, 2007

links for 2007-08-18 | giancarlo.dimassa.net said:

[...] Emulate Ajax Image Loading with CSS | 404 Creative Studio (tags: css ajax design tips web html resources loading progress snippets) [...]
on September 5, 2007

FavHost said:

Good stuff. I’ll be using it in some of the websites I design.

Thanks for the info!
on September 5, 2007

unTECHy.com said:

Thanks for the info. I’m just learning about ajax and I’m liking it.
on September 11, 2007

CSSVault Blog » Blog Archive » Emuate AJAX Image Loading with CSS said:

[...] Creative Studio has a short, sweet piece on how to emulate image loading with CSS. The only limitation is that you need a predefined width and height, and that the image loader [...]
on September 13, 2007

DESIGNEXPANSE.COM said:

I like this alot. Thanks for sharing this.
on September 13, 2007

John M said:

Wow. CSS Ajax image loader…

Stunning! Great work, thanks for sharing!

John
on September 27, 2007

Luxbot said:

Thank You! We will pass this on to our blog!
on October 9, 2007

Sadia said:

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

Kevin Flahaut said:

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.
on October 18, 2007

That Guy said:

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?
on October 18, 2007

Heavy said:

Very neat…good work, thanks.
on October 23, 2007

Kevin Flahaut said:

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.
on November 9, 2007

Sexta-feira dos Web Standards #3 · project.47 - Portfolio e blog sobre Web Standards said:

[...] Emulate Ajax Image Loading with CSS - Técnica muito interessante que simula o carregamento de uma imagem através de loading similar ao utilizado em Ajax, porém, somente com CSS. Vale a pena dar uma olhada. [...]
on December 3, 2007

Boyan Boychev said:

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!
on January 25, 2008

Nadia Dxb said:

Good one. I will use it in some of the websites I design.
on February 12, 2008

Dwayne Charrington said:

Wow, so simple, yet so smart. Awesome trick dude. I love trying new things with CSS.

- Dwayne Charrington.
http://www.dwaynecharrington.com
on March 13, 2008

Tim B. said:

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…
on March 27, 2008

minikperi said:

Great article1 ÅŸ’ll use it but i was looking for loading image to a spacific area with ajax when mouse over an element.
on May 23, 2008

k?z oyunlar? said:

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out