Javascript preload images for css background-image change

Question

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:

<a href="index.php" title="Home ">
 <li id="current">
   Home<br \>
   <span class="nav_desc">Text text</span>
 </li>
</a>
<a href="about.php" title="About" id="about-link" 
   onmouseover="hover('about');" 
   onmouseout="hoverClear();">
 <li id="about">
  About<br \>
  <span class="nav_desc">About me</span>
 </li>
</a>
<a href="more.php" title="More" 
   onmouseover="hover('portfolio');" 
   onmouseout="hoverClear();">
 <li id="more">
  More<br \>
  <span class="nav_desc">More More More
  </span>
 </li>
</a>

js:

function hoverClear(){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)");
}
function hover(hover){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)");
}

So, when a link is hovered it does a function to change div background image. But the issue is when the page is first loaded and the links hovered for the first time there is slow loading of the image.

But once they have loaded it works seamless. I expect this is an issue with it needed to be loaded. So is there a way I can preload the images before hand and still use the same method for the hover.

Answer 1

Stack your images as one image, and then add a class that shifts the image's background property to the appropriate offset.

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.

Answer 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:

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

function hover(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.