Creating a CSS Image Preloader

There are plenty of ways to create preloaders for your images, generally a lot of them use JavaScript to get things rolling. No longer are you shackled to JavaScript preloaders, with CSS you can preload your images with little to no hassle.

Why Use a Preloader

Why should you even consider using a preloader?  Have you ever had a site where you roll over the navigation and there is a delay until the image is loaded….suck huh.  The preloader will help you with this.  It’ll load those images when the page loads and stores them in your browsers cache.  So when a user rolls over the nav, nice and smooth, no delay.

The CSS

The idea is to create a CSS style that sets up a bunch of background images, then hide it so you can’t see images.  These background images will be the images that you want to preload.

Here is a sample:

1
2
3
4
5
6
7
8
9
#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}

Now this is just one way to hide your images so they don’t display.  I’ve also seen it where they shove the background image off the page by giving it a really large background position value. Or give a negative margin. There are plenty of ways to hide the images you are preloading, pick the way you’re most comfortable with.

Alternative

It doesn’t happen too often that you’ll have a HUGE image that needs to be downloaded, if you do it’s only common courtesy to give some sort of indication that the image is loading.  Here is some CSS that will give users a hint that the image is loading.

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

The gif would be animated, something like the beach ball on Macs or the Hour glass on PCs.  Come up with an animation to let the user know something is happening.

Conclusion

Do your best to preload when it makes sense. Your users will love you for it.  Actually they probably won’t notice, but that’s a good thing, if they notice your site loading, it’s probably too slow.

Devirtuoso