One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event and thus there will be a short annoying delay between the mouse going over that area and the image actually showing up.
Technique #1
Load the image on the element’s regular state, only shift it away with background position. Then move the background position to display it on hover.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Technique #2
If the element in question already has a background-image applied and you need to change that image, the above won’t work. Typically you would go for a sprite here (a combined background image) and just shift the background position. But if that isn’t possible, try this. Apply the background image to another page element that is already in use, but doesn’t have a background image.
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
The idea create new page elements to use for this preloading technique may pop into your head, like #preload-001, #preload-002, but that’s rather against the spirit of web standards. Hence the using of page elements that already exist on your page.
I had the idea to try to and use the same element, only use the :after pseduo-class to load the image, so you didn’t need to rely on there being enough extraneous background-free images on your page to work with, but for whatever reason didn’t want to preload them properly.
More
Check this article out for some more techniques, including JavaScript.
Interesting tips above. I used to use javascript for this but CSS preloads are easier to implement and fully browser compatible.
A different way to pre-load images with CSS can be found here http://www.prismgraphicdesign.co.uk/blog/?p=12
Tony, your technique will not work in any modern browsers. Both inline and background images do not load when applied to elements whose display property is “none”.
Im dont undersantd
This worked like a charm for me. Thanks for the great idea.
You can also use this:
This will cache the image, ready to be used wherever necessary.
I like this solution! I ended up having to include
position: absolute;
to keep the pseudo-element from throwing off my layout, though.This will fail for IE8 and below since :before/:after aren’t supported unfortunately. If you’re not worried about supporting that far back then this will also work.
Aaand, in cnwtx example, if we use “display:none;” instead of “visibility:hidden;”… will the image cache as well anyway?:
Thanks in advance.
Obviously — yes, works for me. Thanks @cnwtx!
I can’t paste this method here in the comments, but here is an excellent method I found:
http://www.netmechanic.com/news/vol6/css_no18.htm
What if you were to create one div? Then give it multiple backgrounds.
http://waytohtml5.blogspot.in/2013/07/preloader-using-css3-without-image.html
Technique #2, intelligent!
Thanks cnwtx, your solution worked perfectly for me.
Im dont undersantd!
Good solution thanks!
based on solutions above.
Many browsers support Multiple Backgrounds now.
http://caniuse.com/#search=Multiple%20Backgrounds
Love these solutions. I’ll definitely try them out sometime. But for my issue I am still at a loss. How would you do it on this page? My rollover is using two background images.