How to preload images? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geo开发者_开发问答graphic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

I'm using a big Background image on hover which is set in css background {....}

It takes time to load first time upon mouse over so I want to preload this background image.

What is the best option to do this either using pure css or javascript or jquery?

Pls don't suggest me CSS Sprite.

---

You can take a look to the CSS sprites techniques which could decrease considerably your images size. By the way it'll help to preload all hover, or dynamically changing decorations images has they have been loaded at page loading.

---

If the image is always the same, the following will do it:

pic1= new Image(100,25);
pic1.src="http://someplace.com/image1.gif";

---

If it's for a hover effect, use css sprites and forget javascript. Easier, and fewer http requests.

---

Or don't preload it as such.

Have the image contain both states of the image, then use CSS to re-position the image to show the state that you desire.

If you have multiple images, it might be worth implementing a sprite as mentioned by someone else.

Another link: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/