how to pre-load images only using css no js?

Question

how to pre-load images only using css no js? for all browsers?

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

Answer 1

Use CSS Sprites.

Answer 2

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.

Answer 3

Here is how you can do that: