Emulate AJAX-style image loading using CSS

Placed in: Home

Cialis Online

AJAX-style image loading using CSS

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

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

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

kumar - Great invention...

2010-02-21 16:54:39

Great trick and very useful for basic.

Reply | Quote

CaptainBli - Engineer

2010-02-25 21:04:16

I have to say I love the idea. I used it in my inline frame until the new page loads. Then the page overwrites the background and it works perfectly.

Thank you very much for the info.

Reply | Quote

Guruh - Nice Idea

2010-07-21 08:04:02

wow .. I have to say it's good idea and very simple to implement .. thanks for sharing it . Look forward another idea

:cheer:

Reply | Quote

CSS loading - Real css loading

2011-09-15 10:16:11

As for absolute CSS loading, try the CSS animations. For instance http://cssload.net is the free loading CSS animation generator

Reply | Quote

jeniffer

2011-12-08 13:34:36

We specialise in portable display systems including pop up display stands, banners display , literature dispensers, vinyl banners,folding displays, pavement signs, scrolling banner & other point of purchase equipment & pop up stands. Our in house large format printing department produces vinyl banners, exhibiton panels, display boards, floor graphics.
Banner displays, like poster display , exhibition stands, and portable displays, offer a great way to increase the exposure of a business. Banner displays can help to promote a product,

Reply | Quote