Comments on: Even better image preloading with CSS2

By: Pol

Pol — Tue, 24 Aug 2010 15:53:32 +0000

Thanks for the snippet works like a charm on every project.

By: Sarah

Sarah — Fri, 20 Aug 2010 14:51:56 +0000

This works perfectly for FF but I can’t seem to get the same effect on IE8, has anyone else run into this problem?

By: spooky

spooky — Sun, 08 Aug 2010 12:03:20 +0000

Definitely the best way to preload images. Once I have found this great article, I have tested it and it worked better than any js preload technique. Now, I am using this method for every web site. Doesn’t work in IE6/7 …? What a pity…. (irony)… Who gives a damn about those crippled browsers anymore?
Thnx ninja. Remarkable mind you have. Live long and prosper.

By: Catalin Red

Catalin Red — Tue, 25 May 2010 13:03:54 +0000

Very interesting, thanks for sharing!

By: kn33ch41

kn33ch41 — Tue, 09 Feb 2010 19:40:05 +0000

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

By: The Css Ninja

The Css Ninja — Sun, 31 Jan 2010 02:44:07 +0000

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.

By: Michael

Michael — Sun, 31 Jan 2010 02:34:23 +0000

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!

By: Michael

Michael — Sun, 31 Jan 2010 02:17:54 +0000

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.

By: The Css Ninja

The Css Ninja — Sun, 31 Jan 2010 00:55:03 +0000

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

By: Michael

Michael — Sun, 31 Jan 2010 00:46:53 +0000

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;
}