Image Preloader

When slicing down .PSDs to style the markup, CSS gals and guys usually start with a set of generic rules to make sure everything has some global default white space. At this point they usually style links and corresponding pseudo-classes (:hover, :focus and :visited).

* { margin: 0; padding: 0; }
p, ul, ol, dl { margin-bottom: 1em; }

After ‘initialization’ of the CSS file, they probably dive into site specific styling. But hold on! Why not establishing generic content image preload notification while we are here?

Why We Should Do That?

Visitors browsing at slow Dial-up connections have to wait until the large images are downloaded and until something appears on the screen they even don’t have a clue that something is missing — they see an empty block of space between two blocks of text. I know it confuses me sometimes. If we provide a visual clue that something is happening with the web page (e.g. the image is loading and there’s nothing to worry about), the visitor will rest assured that the particular interface element will appear on the screen eventually.

Background Animation Behind the Content Image

We need only one simple line of CSS:

img { 
    background: url(loading.gif) no-repeat 50% 50%;
}

and a GIF animation. GIF is prefect, because it has a small file size and we don’t need anything fancy, just the visual clue.

Universal ‘Preloader’

If you wanted to use this generic background image, there should be a certain level of customization. With a little as possible CSS tweaking (changing background color of the content image) we can reuse the same GIF. Here’s a sample ‘preloader’. This animation is transparent, so it’s fairly reusable. Right click and take it with you…

Shown example is nothing revolutionary, but it’s easy to implement and it’s an interface detail that improves usability. Take a look at the demo page.