Preload Images

MySpace Website Tutorials | Submited Feb 13, 2008

Written by: Rev. B.

Notes

This is fairly simple, I used it because I didn't want any image flickering in between images when they were hovered.
It could be used with this, so that there's a smooth transition between the main image and the hover image.

HTML

Put all the hover images inside a DIV box, and that's it. We'll get to what to do with it in a minute.

<div class="preLoad">
<img src="HoverImageOne" />
</div>

CSS

This is what makes it work right. All it's doing is making them translucent, and small. So that the browser loads them, but the user doesn't see them.
[Style Tags]

.37182{move the DIV box so it at the top right of the screen}
div.preLoad{position:absolute; top:0;
left:50%; margin-left:-300px;}

.37182{hide the images from the user, not the browser}
div.preLoad img{
width:1px; height:1px;
opacity:0.1; filter:alpha(opacity=10);
-moz-opacity:0.1; -khtml-opacity:0.1;}

That's it

Now your fancy navbar or whatever won't flicker. Aren't you happy?