2

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?

Improve this question
1
  • Why don't you want to use CSS sprites? Commented Dec 15, 2009 at 5:43

3 Answers 3

Reset to default
4

Use CSS Sprites.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

this doesn't work in all browsers. some of them don't look any further in elements that are not displayed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.