CSS background image loading delay

Question

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

However, when I hover over the tabs for the first time after loading the DOM, there was a slight delay before showing the hover-image, which led to the jarring effect.

I don’t know how to fix this, any ideas? :)

Here is an example: http://jsfiddle.net/timkl/fjupq/ - on the JSFiddle server the delay is not so long, but it is still there.

Answer 1

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

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

You are using a single image, and instead of changing the background to :hover you simply change the position of the background. Thus, the entire image is loaded in advance.

For example, view the sprite sheet:

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

You do not need to take this to extremes, you can just have one image with normal and :hover states and move it left / right or up / down.

Answer 2

A simple solution is to use javascript to preload the image. Include this in the CHAPTER of the page:

 <script type="text/javascript"> var img = new Image(); img.src = "http://dummyimage.com/200x10/000000/fff"; // background image </script>