Image Preloader

[mitchellcain]

I have a problem with a mouseover in a cell that I have on my site. The scripts involved are below. The mouseover works, but it takes about half a second to load the image, which really ruins it. Does anyone know of a way that I can preload the images so that the mouseover works instantly.

Here is the HTML:
<td class="a" onmouseover="this.className='b';" onmouseout="this.className='a'><td>

And in an external css document is the following:
td.a { background-image:url('menu_bg.gif'); }
td.b { background-image:url('menu_bg2.gif'); }

Thanks
Mitchell

[AdamGundry]

Try something like this:
<script type="text/javascript">
var img = new Image();
img.src = 'menu_bg.gif';
</script>

Adam

[mitchellcain]

I couldnt get it to work. Does anyone else know of anything?

PS. Cool Quote. I code in XHTML1.1

[AdamGundry]

That is the basic method for JavaScript preloading, though you can also preload in HTML using an invisible <img> tag containing a reference to the image. Bear in mind that this is not a magic solution - it still may take too long depending on the size of the image.

For more information, see this thread: http://www.webdeveloper.com/forum/showthread.php?s=&postid=219653

Adam