Image Preloading Through CSS3 Caching

HTML:

CSS:

Explanation:

Basically what is going on is that instead of using some clunky JavaScript preloader you should use the new "content" property then modify it by ":after" pseudo-element then follow that with a "display:none;." Now someone with half a brain says that you can do the same trick by having containers for each image. I just want to say that my example is faster and simpler.

What I have done is to build a very simple example with obnoxiously large images to illustrate that the caching is working. Notice once you let the first page load, ever other page will take no load time because it has been cached. You can also see an example if you look at the bottom of my site’s css marked "/*____ PRELOAD IMAGES ____*/," see it here. Also, remember you need to place the preloading section at the bottom of your style sheet or it will cause a cascade failure in the loading of your site.

Note: This preloading trick only works on modern webkit browsers which is good becasue it will cover 90% of users. The webkit browsers that support it are FireFox 3.6, Safari 3, Chrome, Opera 9.62 and IE8. (IE8 uses a varient of webkit which is much like a cowboy monkey riding a dog in a circus) That means IE6 and IE7 are not covered, but you can use conditional comments and a lot of extra mark up if you want it to work in 6 & 7, but I honestly would not bother.