Javascript Preload Images For Css Background-image Change

I am developing a website which requires the background image of a div to change on hover of a link. The way it works is by:

Not only does this turn multiple images into one HTTP request, it also means you don't have to bother writing code to preload the hover state of the images.

This is called a sprite sheet.

Solution 2:

You can make a sprite image, i.e. put the two images together into one. Then you just change the background position to show the other part of the image. If the element is for example 20 pixels high, you move the background position by 20 pixels:

functionhoverClear(){
  $('.navReflect').css("background-position", "0 0");
}

functionhover(hover){
  $('.navReflect').css("background-position", "0 -20px");
}

As it's only a single image, the alternate look is loaded from the start. This will also reduce the number of requests to the server.

You can ever put more images together like this. You can see an example at the top right corner of my website, where a single image is used for two different flags each in two different states.

Solution 3:

pretty simple to preload images, something like:

var img = new Image();
img.src = "/path/to/image.jpg";

This could be in a window.load or dom:ready event somewhere

Solution 4:

you can use this solution. http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/