How to 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:

loading image

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.

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.

a very large image

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:
alternate text

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.

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!