Even better image preloading with CSS2

Recently I read an article on better image preloading using CSS3 which presented a clever idea using CSS3 multiple background images to preload images on one element as opposed to another method of having containers for each image. As of writing the support for multiple backgrounds is fairly sparse with webkit having the best support (Safari 3+ & Chrome 1+), Firefox is introducing this in the upcoming 3.6 release.

There’s a better way

The article instantly got me thinking on a potential alternate method to accomplish the same task, but using a widely available CSS2.1 property. Which if possible will up the browser support significantly. Thankfully the idea actually worked.

CSS generated content

In CSS2 a content property was introduced, which in conjunction with the :before and :after pseudo-elements allows us to generate content in a document. The most interesting value that can be used with the content property is url() which allows us to pass an image.

content: url(img01.jpg);

That’s all great than we can add a single preloaded image using the content property but what about multiple images? That’s where the content property shows its true power, we can pass multiple url’s.

content: url(img01.jpg) url(img02.jpg) url(img02.jpg)

Brilliant, we can now preload multiple images using one line of CSS. We have all the benefits of the CSS3 method without the CSS3 and the Browser support grows exponentially.

• IE8+
• FF2+
• Safari 3+
• Chrome 1+
• Opera 9.62+

Putting it all together

Now we know how to preload multiple images using CSS2, lets put it all together:

body:after
{
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}

Instead of creating an empty div with a class on it, we can utilise the requirement of the :after (or :before) pseudo-element. This needs to be there for the content property to work. We apply it to generate the content after the body tag and then set it to display: none, that way the preloaded images aren’t shown but are still loaded. We know have a pure CSS solution that requires no mark-up.

Almost perfect

IE6 and 7 do not support CSS generated content and therefore will not preload any images, but that’s a minor trade off. Users of IE6/7 will just have to load the images when they are called rather than getting them from the cache.

A possible work around for their lack of support is to use conditional comments to load the images. This solution will require extra mark-up.

Post filed under: css.

Skip to comment form.

Comments

1. 

   Nice one, Ninja. Good solution.

   Rod Homor, January 6th, 2010
2. 

   Nice trick! Thanks

   Creative ideas, January 6th, 2010
3. 

   Fantastic, clever trick.

   Daniel Nordstrom, January 6th, 2010
4. 

   Very nice idea. I immediately used it on my site. I gave you the credits in the code.

   Ignazio, January 9th, 2010
5. 

   So if we use this should we preload every major image on the site?

   Also, would you place

   body:after
   {
   content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
   display: none;
   }

   Michael, January 31st, 2010
6. 

   It’s up to you what images you wish to preload.

   The Css Ninja, January 31st, 2010
7. 

   When I cache a lot of images, ff 3.6 seems to throw them all out as it it is caching nothing. I’m not hitting the browser cache limit because I have viewed the whole site then go back. It is clear it is caching.

   Is there a limit to the number of images or MB limit to the “content” that is set in the css.

   Note: I found out that you need to place the “body:after” section at the bottom of your css document for best performance.

   Michael, January 31st, 2010
8. 

   Ok, my mistake. I was caching around 50 images. Apparently if you make one mistake in spelling of an image if will cause the cache to fail.

   Thanks

   The NINJA ROCKS!

   Michael, January 31st, 2010
9. 

   One thing to make sure of is that you use the same path in the content property as you do when the actual image is called. If one is relative and other absolute the browser can potentially see this as a new image and not grab it from the cache.

   I’m not aware of any limit though I doubt it would have a limit on how much it can call.

   The Css Ninja, January 31st, 2010
10. 

    Very nice approach; it’s clean and degrades well.

    kn33ch41, February 10th, 2010

Trackbacks

1. [...] This post was mentioned on Twitter by Umut Muhaddisoglu, Ryan Seddon and topsy_top20k, topsy_top20k_en. topsy_top20k_en said: New post, Even better image preloading with CSS2 -> http://cssn.in/ja/021 [...]

   Tweets that mention Even better image preloading with CSS2 | The CSS Ninja - All things CSS, Javascript & xhtml -- Topsy.com, January 5th, 2010