CODEWITHSUNDEEP
csspreloadpreloadingimage-preloader
Jitendra Vyas
Jitendra Vyas

Reputation: 152627

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

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?

Upvotes: 2

Views: 387

Answers (3)

Sarfraz
Sarfraz

Reputation: 382656

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.

Upvotes: 1

NinjaBomb
NinjaBomb

Reputation: 793

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.

Upvotes: 0

eozzy
eozzy

Reputation: 68650

Use CSS Sprites.

Upvotes: 4

Related Questions