When slicing down .PSDs to style the markup, CSS girls and guys usually start with a set of generic rules such as

* { margin: 0; padding: 0; }

Then they set a few additional rules:

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

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). 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 Would Do That?

Visitors browsing at slow Dial-up connections have to wait until large images load and they don’t have a clue something is missing — they see an empty block of space between two blocks of text. I know it confuses me sometimes. If we provide visual clue that something is happening with the web page (the image is loading and nothing hangs), they will rest assured that the particular image will show 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 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 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 usable interface detail. Take a look at the demo page.