Preload images using javascript

With Internet Explorer and other browsers there have been issues known when trying to load images
after the page is loaded. Let's say you try to load a new image using a onmouseover event,
older Internet Explorer versions will not load the new picture at all.

We first put the image in the clients browser cache, any time later that the image is being called
it will show immediatly. So using this workaround you generate fast load times and browser compatability.
This next code shows an example of pre-loading three images.

<script type="text/javascript">
<!-- hide from non JavaScript Browsers

Image1= new Image(150,20);
Image1.src = "pic1.gif";

Image2 = new Image(10,30);
Image2.src = "pic2.gif";

Image3 = new Image(72,125)
Image3.src = "pic3.gif";

// End Hiding -->
</script>

The script above would pre-load images 1 to 3. If you've used image flips before you can see that that code has a pre-load built into it.

If you've never seen one of these run before, here's what it all means:

Image1= new Image is the first step of setting up a new script effect for an image
(150,20) are the width and height, respectively, of this image
Image1.src = "pic1.gif" gives the source of the image.

Place the script near the top of your page, in the head if you prefer. This will ensure it runs early as the page loads.

Posted by James on 2009-05-04 in the category " javascript "