How to pre-load images only using CSS (no JS)?

Question

How can I pre-load images only using CSS, so without using JavaScript? It has to be cross-browser.

I don't want to use CSS sprites. Is there any other solution?

Answer 1

You can use multiple elements, hidden with background-position: -1000px -1000px; and give them a background-image for each image that you want to pre-load.

• You can read more here

Answer 2

Use CSS Sprites.

Answer 3

You could try loading them all before the ending body tag and not display them. Then, if you call them later on they should be in the cache if you use the exact same path.

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

You can also make a class with display:none and apply that to all of the images you want to preload as well.

This would incur more HTTP requests though and if you want to cut down on those I suggest CSS Sprites if that ever concerns you.