…A way to have those images load with the page… but I can’t remember how…

Asked by Brian Purkiss, a freelance designer in San Antonio Texas.

For example, on WebDesignerWall.com, the navigation has an image display for the hover over effect.
Most web sites, when you hover over the link, the image loads, often creating a funny look - however temporary.
There is a way to have those images load with the page… but I can’t remember how…

That ‘funny’ look is the delay between the onHover event and the image being loaded


It was more commonly seen in the javascript based ‘onmouseover’ days. To get the images to swap , a javascript function was called to swap the source of the image using DOM manipulation

From: http://www.htmlite.com/JS019.php
<a href=”onMouseOver=”document.MyImage.src=’image2.gif’;” onMouseOut=”document.MyImage.src=’image1.gif’;” >
<img src=”image1.gif” name=”MyImage” /></a>

Because of the delay between the mouseover event firing, and the server returning the requested file, there was a funky transition on hover where the background image would disappear.

Back then people avoided the delay by pre-loading the images on page load. This saved them to the cache and when the mouseover event fired the images were loaded instantly from the hard disk, instead of being requested over the internet.

This is no longer a recommended approach.
But you can refer to these sites for more information on how it was done

Better Hover Effect using CSS Background Swapping

With CSS we can target the ‘:hover’ pseudo-class for links and update their background properties.

Example
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav_tab.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}

The Image itself is composed of both the inactive and hover states combined. This is called a sprite, using this technique the image must only be requested once.

css_hover_effect

For more on this type of effect I recommend Nick La’s Advanced CSS Menu tutorial available on WebDesignerWall itself. Alex also has a post on his personal blog called Image Sprite Navigation with CSS similar to this technique but it only uses one image for the whole navigation, and an updated one called CSS Image Sprites Tutorial.

I’m already doing this , how can I make the images load even faster ?

One of the obvious things I didn’t point out is compressing and optimizing images. If you are using bloated images then the size of the image itself will slow down the load process.

See Kris ‘the_krusher’ Crousore’s post on Saving for web with Adobe Photoshop.

I’ve done all these, Can I go faster ?

Use a Content Deliver Network, like akamai or Amazon s3 to serve your images. These are single purpose that networks that do only one thing. Serve content at blazing speeds. They can cut down your request and load times for media and further reduce delay between page load and image caching.

Any faster ?

At this point I have to open it up to the readers and see if they can offer some tips on getting peak performance from hover-based menus