Switching Images Lag Before Loading

Question

I just built this website. http://colossalminds.com/

If you scroll a bit down and hover your mouse over the house, the man, or the crossed swords, they flash before the image is switched to the blue one. This happened mostly in Firefox however sometimes it occured in Chrome.

Is there a way to stop this. I've tried preloading all my images like this but it didn't help:

/*preload*/
body:after{
    content: url(../images/header_bg.jpg) url(../images/homeHover.png) url(../images/content_middle.jpg) url(../images/graph.png) url(../images/home.png) url(../images/logo.png) url(../images/man.png) url(../images/manHover.png) url(../images/phones1.png) url(../images/speech.png) url(../images/speech1.png) url(../images/swords.png) url(../images/swordsHover.png)  url(../images/time1.png) url(../images/PieChart.png) url(../images/unique.jpg)   
    display: none;
}

I am open to any answers that involve html, css, or javascript.

PS How can I easily get my code to be formatted as code on this StackOverflow? As of now I am clicking spacebar on every line and its a big pain.

Answer 1

This is happening because only the first image is loaded. The image that is shown upon hover isn't loaded in until then so it takes a split second to switch.

The best way to solve this is to use sprites. Here are the basics.

Answer 2

It seems to be as if the css code to preload the images, isn't actually preloading them.

Try a javascript solution, such as:

<div class="hidden">
<script type="text/javascript">
    <!--//--><![CDATA[//><!--

        if (document.images) {
            img1 = new Image();
            img2 = new Image();
            img3 = new Image();

            img1.src = "http://domain.tld/path/to/image-001.gif";
            img2.src = "http://domain.tld/path/to/image-002.gif";
            img3.src = "http://domain.tld/path/to/image-003.gif";
        }

    //--><!]]>
</script>

(taken from here)

Or create a two div boxes for the images. One with a z-index of 0 and anther with z-index 1 and change the z-index on hover. (z-index is 3D positioning basically)

ps. I think the code formatting may relate to your reputation - still a noob here too though

Answer 3

The route would take to correct this is create one image sprite to load all 6 images and use background position to change on hover.

This would cut six GET requests to one(good savings) and ensure they are all loaded. some info http://css-tricks.com/css-sprites/