Geek asks and answers

Loading images when loading a page, CSS

I recently asked a question about using images as buttons using Java Script. The answer I received was referencing me to use CSS instead and it works fine. However, the images I use take about 0.2 seconds to load.

Before I used this code, I had a page loaded with all the images at the beginning, and then a JS script to change the zIndex of the images on certain mouse events, however this overrides the href links and does not work.

With the new code, the whole function works and therefore doses href, but every time the page loads only the first image loads, the other 2 I use under this image when loading when the mouse events are triggered. This means that the buttons flash when the action is completed. How can I change this code to upload images while loading the page?

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

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

+3
source share
1 answer

The call to load the image will not be executed until the CSS style is launched.

html , ,

- , .

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 */

, a:hover " " .

+3

More articles:


All Articles