Pre Loading Images with CSS

Tags:

In order to get a smooth rollover effect with your images you need some way of having them available and ready to be used. You don't want your visitors to hover over an image and wait for something to happen. It needs to be almost instant.

Traditionally this has been done using javascript. But, with some people choosing to disable javascript for security reasons you need to consider other options to assure accessibility. So, the only real choice is to use CSS to pre-load your images to your web browser and have them available when you need them.

Generally you would be using this method to pre-load small navigational icons or something similar. You would not normally be pre-loading huge image files as it would make you page load times considerable longer.

Example 1

Here is an example of a navigation menu using different background images on hover.

The icons used in this example are originally from FamFamFam and are a great set of free icons. I have modified the originals to include a grey-scale version and converted to gif, so as to display correctly in IE.


Example 2

Here is an example of a larger image that changes on hover. Once again the images are background images defined in CSS.

The images in this example are copyright NZ Digital Images


The HTML
The CSS