CSS: image preloader

Tweet

Today we are going to explore another CSS basic usage: image preloaders. It is a good practise not to use big images (in terms of weight) for web sites, however sometimes it's part of the game. Just consider the fact that a web site may be centred on photography and high resolution pictures may constitute its most important element.
In those cases, images may take a while to load and empty boxes shown on the home page aren't really a good welcoming sight for users.
With CSS we can reproduce a loading gif like:

which will be displayed while the main image is being loaded.
Let's see how we can do it.

The HTML

We need to create a container for the image:

<div class="preloader">
   <img src="image.path.jpg" width="840" height="281">
</div>

The image sits inside a div with class="preloader". In the img tag we set the original width and height of the image (840 and 281 are just examples).

The CSS

With some basic rules, we can style the image container:
div.preloader

{
    width: 852px;
    height: 293px;
    padding: 5px 5px 5px 5px;
    border: solid 1px #000000;
} 

The width and the height of the container is considering the image size and the borders and padding (840+5+5+2=852 and 281+5+5+2=293). The above rules can be changed according to your needs, as usual.
Now we set rules for the image itself:
div.preloader img

{
    display: block;
    background-image: url(images/loading.gif);
    background-repeat: no-repeat;
    background-position: center center;
}

We use as background image the animated gif shown above (the classic rotating gif, but you can use the one you prefer as long as it is showing that something is going on). We position it at the centre of the container, without repeat.
And that is all. While the big image is loading, the user will see the animated gif. When the big image has been loaded, it will cover and hide the animated gif.

Hope you liked the example and see you next time.