tags:

views:

70

answers:

2

Hi,

my Page has many hover images, sometimes there are backgrounds from div-elements or src in img-tags.

Now I have the problem, that when the page is not fully loaded (90% for example), and you want to click an menu item before it's 100% loaded, the image hover of the menu item is not loaded too. So when you haver than, you get an empty menuitem or empty field (whatever is it without that image).

How can I preload my hover images?

+3  A: 

You can combine all images into one "master" image and then show slices of it where necessary. This technique is known as CSS sprites. Then there will be just one single image to load. After that all parts and pieces will already be there.

Developer Art
+1  A: 

I agree with Developer Art. Go down the CSS Sprites route. The other benefit to them already being there is you reduce the number of requests to the web server which in terms of performance is always a good thing.

m1dst