Slow loading rollovers

Hi I have some social buttons in my footer that turn brighter when hovering on them, however there is a slight delay until the rollover image loads, which is a bit unsightly, how can I fix it? http://bit.ly/cSPkOU

a nice idea. thanks Paul :slight_smile: i might just use that.

One quick and dirty way to preload the images is to write the image tags of the hover version at the bottom of your page and set the height and width of each to 1px. When the page loads these images will load at the same time as the normal images, but will not be noticable, as they are very small.
There will be no delay when you hover, because the image objects are already in the cache.

  1. use sprites: images for both the normal and the hover/active states put in the same file. instead of putting a reference to another image file, you’ll change background position on the hover/active state in css.

  2. preload images if you still want different image files for each of the states.

If you don’t want to make new images for a sprite then put the over state of the image in the background of the list element (size the list to fit if needed).

The anchor still contains the normal state of the image but on rollover you make the anchors background transparent and the image underneath shows through because it is already there and pre-loaded.

.test a:hover{background:transparent}

It’s the fastest way to do a rollover and there will be no delay but does not work for transparent images of course because you would see the other image underneath. If the images are transparent then the sprite approach is best.