HTML Image Rollover - Image isn't fully loaded before rollover?

Question

I have an image (in the top left as a home link), and I use the CSS :hover to change the image upon rollover.

The problem is, the image takes time to load the first time I rollover it. There's a temporary blank space, and you see the image incrementally load. It takes about a second, but it's annoying.

How can I fix this so the rollover is seamless? Is there a way to preload the image?

Answer 1

There's two options I can think of, off-hand:

1. css image sprites, or
2. placing the :hover image in a hidden div elsewhere in the page.

---

1, sprites:

For a CSS Sprite , have one background image for the 'home' link, and simply change its position on the :hover :

#home {
    background-image: url(http://example.com/spriteOne.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}

#home:hover {
    background-position: 0 200px;
}

This does require set heights for the elements with the css-sprite background, though.

---

2, hidden preloading elements:

#home {
    background-image: url(http://example.com/bg.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}
#home:hover {
    background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
    display: none;
}

<div id="preload">
    <img src="http://example.com/hoverBg.png" />
</div>

Answer 2

A method that I have found works really well for rollovers is using CSS sprites, ie using an image that contains both the original and rollover versions of the image. That way both versions load at the same time, and changing between them is just a matter of changing the background-position style.

Answer 3

One way to do it is to add an invisible image to your page, with the same URL. So by adding the following to the beginning of the documents body, you actually instruct the browser to load this image as soon as possible.

<IMG src="rolloverImage.png" style="display:none">

While this tag remains a part of your document, it is not shown or even rendered because of the "display:none" settings. You can even listen to its load event and remove the tag completely from the DOM once it is loaded, to keep the "garbage" out of the document. Once an image is loaded to memory, it is automatically reused every time you refer to the same URL, so once you set the source of the other image to the same URL, it will be loaded from memory.

Hope that helps, Kobi

Answer 4

1. Answer: Use CSS Sprites

2. Answer: Or create something like this:

<a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

And the CSS:

img.nohover {

border:0

}

img.hover {

border:0;

display:none

}

a:hover img.hover {

display:inline

}

a:hover img.nohover {

display:none

}

Answer 5

Put the image in a div with a style set to { height: 0; overflow: hidden; } { height: 0; overflow: hidden; } { height: 0; overflow: hidden; } , that should make the browser preload the image.