Make images be downloaded even if they are not being shown

Question

I have a html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title/>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <style type="text/css">
    a.button {
      background: url('button.png') repeat-x;
    }
    a.button:hover {
      background: url('button_hover.png');
    }
  </style>
</head>
<body>
  <p><a class="button" href="#">Button</a></p>
</body>
</html>

The image button_hover.png is only being downloaded when I hover the button. I know that it is the default browser behaviour.
Is there some way to force the download of the image? If yes, how? (I would prefer not to use JavaScript, but I could if there was no other choice).

Thanks and sorry for my bad English.

score 2 · Answer 1 · answered Jun 09 '11 at 02:41

The best solution here is to use CSS Sprites.

Both states of your button will be in one image, so your :hover image will be downloaded automatically.

Not to mention the other substantial benefits you'll get, such as improved page load speed thanks to only having to download one image for the entire menu, instead of two images per button.

score 2 · Accepted Answer · answered Jun 09 '11 at 02:47

The standard way to do an a & a:hover state is to use a sprite that contains both states of the image. Then instead of having to load an image for the hover state (which is really ugly), you instead get both "images" at the same time.

a.button {
  background: url('button.png') repeat-x;
  background-position: 0px 0px;
}
a.button:hover {
  background: url('button.png') repeat-x;
  background-position: 0px  YYpx; /* X, Y offsets */

}

Where your combined background image now looks something like this:

-------------------
|  active state   |
-------------------
|   hover state   |
-------------------

score 0 · Answer 3 · answered Jun 09 '11 at 02:41

This can be done by pre-loading the image with Javascript:

<script language = "JavaScript">
function preloader() {heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";}
</script>
</head><body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"><img name="img01"src="justanotherfile.jpg"></a>

Here is an article on it

Make images be downloaded even if they are not being shown

3 Answers3