Load images on Page load, CSS

Question

I recently asked a question on using images as buttons using Java Script. the answer i got refereed me to using CSS instead and works fine. However The images i am using take about 0.2 seconds to load.

Before i used this code i had my page load all the images at the start and then a JS script to modify the zIndex of the images under certain mouse events, this however overrides the href links and failed to work.

With the new code all function work and so dose the href but each time a page loads only the first Image loads, the other 2 i am using under this image on load when the mouse events are triggered. This means that the buttons flash when an action is preformed. How can i modify this code to load the images at the same time the page loads ?

Code here: http://jsbin.com/casoy/12/edit?html,css,output

I thought i should show the old code as we..: http://jsbin.com/casoy/13/edit?html,css,js,output

Answer 1

The call to download the image will not occur until the css style is triggered.

There are a few ways to do this and organise the html to what you prefer,

- here is a crude example using your code to show the principle.

MARKUP

<div class="preload1"></div>
<div class="preload2"></div>

<a href="http://officialacescottie.co.uk/Home/Home.html">click me</a>

*CSS *

a {
  display: block;
  width: 600px;
  height: 114px;
  background-image:url("/Buttons/Home.gif");
  text-indent: -9999px;
  outline: 0;
}
a:hover, .preload1 {
  background-image:url("/Buttons/HomeP.gif");
}
a:active, .preload2 {
  background-image:url("/Buttons/HomeC.gif");
}
/* hide these off page in a way that 
   the browser will still call the background-image */
.preload2, .preload1 {
  position:absolute; left:-9999px; top:-9999px;
}

/* image urls are shortened here only so it presents better on SO */

This shows the basic principle that, when the a:hover is triggered, the background image referenced has already had a chance to 'preload' to the browsers cache.