If you are display a set of images that potentially will take a while to be returned from the server (for example if pulling them out of a database via an .axd or .ashx) you can use css to to display a loading animation.

For example if you have a page of images using something like:

<img class='advertImage' alt="Car photo" src="AdvertImages.ashx?AdvertID=xxxx" width="250" height="187" />

You can define css as:

.advertImage
{
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../img/wait.gif');
}

This css is saying "use wait.gif image as the background of the img element, put it in the centre and have only one (i.e. no-repeat)".

One of the problems is that while the image is loading some browsers (e.g. Firefox) will display the alt description and an empty image icon in addition to the loading animation which looks pretty ugly - hence the quick and dirty.

SHARE: