Did you ever go on a website where you scrolled over a picture or a link that was a picture and then 5 seconds later the picture changed. This time difference is extremely annoying and can drive users away from your website. The solution does not lie in getting rid of these roll-overs but to preload your images using javascript. Preloading your images loads your images when the page loads instead of when you scroll over the image. Here is how you do it:

The first line creates a new image object named “pic” that has a width of 100px and a height of 100px. The new Image() construct needs two parameters. The first is the width in pixels and the second is the height of the image in pixels. Then the second line specifies the location of the image you are preloading, just replace “image.gif” with whatever image you want to preload. And that is about it. Just be sure to place this in the header section of your website.