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.
If it's for a hover effect, use css sprites and forget javascript. Easier, and fewer http requests.
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.
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/
If the image is always the same, the following will do it:
pic1= new Image(100,25);
pic1.src="http://someplace.com/image1.gif";