The {Code} Cookbook

CSS Image Preloader

By gilbitron in CSS on 23/02/2009 at 06:46

Views: 642
Tagged: css, preload

Starter:

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page. Whenever the images are referenced throughout your pages they will now be loaded from cache.

Main Course:

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png);
       background-image: url(path/to/image2.png);
       background-image: url(path/to/image3.png);
       background-image: url(path/to/image4.png);
       background-image: url();
}

Expand Report Code | Install Coda Clip

Please log in to vote.

Compliments to the Chef

1. Comment by cchana on 24/02/2009 at 03:31

   i've always wondered if this would work, but never really tried it out. i don't see why it wouldn't. might give it a try... but does the CSS not just instruct the browser to load the last one that's specified rather than all of them one by one though?

2. Comment by Stevie on 24/02/2009 at 12:58

   The CSS will load and then display each background image as it comes in the CSS, but will ultimately display the last image loaded.
   
   So, it will load image1.png and then replace it with image2.png and so on... But each image will still be in the cache :)

How was your Meal?