Marko Dugonjić wrote an article about an image preloader, which is too good not to mention.

The idea is brilliantly easy. So easy the real question would be “why didn’t anyone think of this before?”. A pre-loader is frequently used with flashmovies, to indicate that they are, indeed, loading. They get these pre-loaders as they tend to get so large you have to wait on them.

But, images can get quite big as well, and as I’ve noticed when using wifi it can take a while before even small images appear on the screen. Of course this isn’t only the problem with wifi but also with slow connections, or just big photo’s. Now wouldn’t it be cool if you could add a pre-loader to images automatically ?

The code

It’s as easy as:

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

“loading.gif” is an animated gif that shows ‘loading’ or another indication that something is happening. Do remember to make this gif as small as possible, 3kb is big enough. So when you visit your site after this you’ll see ‘loading’ while you wait for the images to load.

Some small problem

Eventhough this sounds like a miracle solution it’s not quite that. When you use transparent images the loading will shine through. The only way to solve that would be to attach some javascript that checks wether the image has completely loaded and then removes the background from it.

A better solution might be to give those images

<img src='' class='transparent'/>

With this in your stylesheet:

img.transparent {
  background-image : none;
}

But still, a useful asset to any webdevelopers toolbox.

Related posts

This entry was posted on Thursday, April 20th, 2006 at 6:35 by Sonja Duijvesteijn and is filed under Webdevelopment, CSS, Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.