Question

I have some tabs for my website where the background-image changes when you click on them.

However when I hover over the tabs the first time after the DOM has loaded, there’s a slight delay before the hover-image show, resulting in a jarring effect.

I don’t know how to troubleshoot this, any ideas? 🙂

Live example here: http://jsfiddle.net/timkl/fjupq/ – the delay is not as long on JSFiddle’s server – but it’s still there.

Answer 1

The solution to this is to use sprites instead of separate images.

• http://css-tricks.com/css-sprites/

You use a single image, and instead of changing the background source on :hover, you simply change the background position. This way, the entire image is loaded in advance.

For example, check out Stack Overflow’s sprite sheet:

• http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

You don’t have to take it to this extreme, you can just have one image that has both the normal and :hover states, and move it to the left/right or up/down.