css: add a “loading” icon to your larger images
Let’s say that you have a large image (or several large images) on a particular page, and you want to let visitors know that the image is loading. You could use a piece of javascript to embed a “loading” image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, we have a much simpler (and cleaner) method to accomplish the same thing.
Step 1: Find a preload image.
There are many fantastic sites out there that will allow you to create your own preload images. Our favorite is here. Just remember not to choose an icon that is too large (file size), or it may not load until after the larger image has loaded. Here is the one that we have created:
Step 2: Create the CSS
There is just a little bit of code to create here, and it can be pasted directly into your stylesheet. Just be sure to replace the “youricon.gif” text with your image name.
Code to paste into your stylesheet:
.load{background:url('images/youricon.gif') no-repeat center;}
Step 3: Applying the code
There are a couple of ways to do this, but this is probably the best solution (depending on your application). Simply encase the image you are interested in loading within a “load” div, and apply the width and height of your image to the div.
Example:
<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="alternate text" /></div>
Here it is applied to an image:
You will likely need to clear your cache and reload this page to see the loading icon appear. A more thorough example of this loading icon in action can be found here.
As mentioned by contributor Lim Chee Aun below, you could also bypass the div and apply the .load class directly to the image itself, and here’s how you can do it:
<img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" /></div>The reason we hadn’t mentioned this idea initially, is if the image does not load it can break the look of the design. If you are absolutely positive you will not have any loading issues, you don’t care if the image needs to be centered (while validating xhtml strict), or if you are applying the class to multiple images, this may be a cleaner solution for you. See our updated example page below for examples of the method created both ways.
If this solution doesn’t fix the problem for you application, let us know what you are doing differently and we’ll be happy to go into more detail.
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!
Tags: css, loading icon, preload
January 26th, 2008 at 1:30 pm
If I’m not mistaken, if the width and height are specified for the img tag, the ‘.load’ class or the background loading image could be applied directly to the img tag instead of the additional div tag.
January 26th, 2008 at 2:00 pm
Thanks for the suggestion Lim Chee Aun! We have updated our article and example page to reflect this option.
January 27th, 2008 at 1:53 pm
Brilliant, and simple!
January 28th, 2008 at 12:18 am
[…] DynamiX Labs » articles » css: add a “loading” icon to your larger images What a good idea. Might be a bit much for every image on your page, but would work like a charm for something like a gallery. (tags: css loading animation image graphics) […]
January 28th, 2008 at 2:21 am
[…] DynamiX Labs » articles » css: add a “loading” icon to your larger images One of those “oh duh!” idea. Put a loading image in the background so that it is covered when the real image loads (tags: image css speedupyoursite) […]
January 28th, 2008 at 8:27 am
Hi Richard. Exactly right, it’s ideal for either a gallery, or for images that are considered very large. In other words, the 15kb jpg’s on the site won’t need the effect as they will load too quickly, but a 150kb image could benefit.
January 29th, 2008 at 1:18 am
David Scatigna has linked to this article.
January 29th, 2008 at 11:08 am
Freedom of Speech has linked to this article.
January 30th, 2008 at 10:28 am
This is a pretty cool idea!
However, wouldn’t it be easiest overall to just apply the background image to the <img> tag directly, without having to worry about a class? Something along the lines of:
img {background:url(’images/youricon.gif’) no-repeat center;}
Admittedly, most images would load quickly enough that you’d never see the background image. But it saves you (the designer) the problem of deciding what constitutes a “large” image. What may be sufficiently small for someone on broadband might be quite large for someone stuck using dial-up. And even broadband hiccups from time to time. At least then, the user knows something is loading in that space.
Again, great idea!
January 30th, 2008 at 4:57 pm
Hi CSSnewbie. That’s a great point, and the reason we didn’t mention it is because it does tend to open up a lot of opportunities for unforeseen issues.
For example, if you are using a javascript piece to rotate images on your web page, the loading icon will fade in and out behind the images. Now this may sound like an added bonus, but we have tested this idea and found that it is a detriment to the look of the rotating image effect.
In addition, in at least half of the image rotators we’ve tested, the background “loading” image was plainly visible even when the primary image was fully faded in, which of course is a distraction and unattractive. Also take the possible additional (though likely minor) load time associated with rendering the loading icon in a myriad of places where it is not necessary, and the potential that you will load an improperly colored “loading” image in certain places.
Say, for example your main content background area is white, but the left hand column is black. If you have created a loading gif with a white background, the loading image won’t fit with the left hand column area’s color scheme. Admittedly, you can create a loading icon with a transparent background, but this will also significantly add to the file size of the loading icon.
Since there will likely be few instances where an image will be large enough to warrant a “loading” effect, we thought it simplest to just encase the one or two images that may be affected by a long loading time, and leave the rest be. Again, a great thought, and depending on your application this may indeed be the simplest solution for you.
March 19th, 2008 at 4:01 am
Hello!
I think this try.
April 17th, 2008 at 2:14 pm
Design Walker has linked to this article on their web site.
April 21st, 2008 at 5:36 pm
Noupe has linked to this article on their web site.
April 25th, 2008 at 4:44 pm
kawa Mag has linked to this article on their web site.
April 30th, 2008 at 11:51 am
Smashing Magazine has linked to this article on their web site.
April 30th, 2008 at 5:41 pm
Love you guys! We have updated our site’s portfolio which uses large images with this handy CSS: http://impresslab.com/work/web.
Thanks! Keep it up!
April 30th, 2008 at 6:19 pm
Thanks Richard! I’m glad one of our articles was of use to you. Great looking web site by the way!
June 16th, 2008 at 9:55 am
Hi,
I found this topic very interesting. I was wondering if this method would work for embedded swf files in an html page. As they are usually larger then images it would be a neat trick.
June 16th, 2008 at 9:59 am
Hi David,
As long as you apply the div around the swf file, it should respond in the same fashion. The only thing to be aware of, is that unless you have specified that the swf should have a transparent background (by adding the wmode=”transparent” parameter), it may not work. Try it out, and if you get stuck, let us know and we can create an example for you. Thanks for the question!
June 21st, 2008 at 7:14 am
- I don’t think a period has to be added in .load. Isn’t it just “class=load” instead of “class=.load”?
June 21st, 2008 at 7:51 am
whoops! Looks like you found a typo. Thanks for letting us know! That has been changed.
July 3rd, 2008 at 10:37 pm
This is an amazingly clever technique! Thanks for sharing!
July 10th, 2008 at 9:54 pm
Thank for sharing with us. great tutorial
July 11th, 2008 at 9:50 am
Great!, I will add this technique in my website thanks for this great tutorials.