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.
Here’s some basic markup
<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…
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.
Pingback: University Update - AJAX - Emuate Ajax Image Loading with CSS
cool.. have a lot and more creativities and imaginary.. things… brilliant… ! nice…
i like your style… ^^
Awesome stuff dude, love to keep things simple like this.
Well done ! It so simple, as usual good ideas.
Do you see the image partially loading, i.e. is it all or nothing?
Pingback: links for 2007-08-18 | giancarlo.dimassa.net
Good stuff. I’ll be using it in some of the websites I design.
Thanks for the info!
Thanks for the info. I’m just learning about ajax and I’m liking it.
Pingback: CSSVault Blog » Blog Archive » Emuate AJAX Image Loading with CSS
I like this alot. Thanks for sharing this.
Wow. CSS Ajax image loader…
Stunning! Great work, thanks for sharing!
John
Thank You! We will pass this on to our blog!
Nice Trick , but i think there is no Ajax Involved , it is simple CSS , you applied the Background image on Table Cells :) , Good
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.
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?
Very neat…good work, thanks.
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.
Pingback: Sexta-feira dos Web Standards #3 · project.47 - Portfolio e blog sobre Web Standards
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!
Good one. I will use it in some of the websites I design.
Wow, so simple, yet so smart. Awesome trick dude. I love trying new things with CSS.
- Dwayne Charrington.
http://www.dwaynecharrington.com
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…
Great article1 ÅŸ’ll use it but i was looking for loading image to a spacific area with ajax when mouse over an element.
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