Back to Scripts

Javascript, How to Preload Images

Preloading images using javascript requires placing a reference to them within the <HEAD> tags of the HTML document.

Does the document.images object exist? (check for older browsers)
Create a new Image
Set the .src to reference the image url location

Copy and paste the javascript source below in your HTML document inside the <HEAD> tags

Javascript Source

    <SCRIPT language="JavaScript">
    <!--
    if (document.images)
    {
      preload_image = new Image(25,25); 
      preload_image.src="http://mydomain.com/image.gif"; 
    }
    //-->
    </SCRIPT>

To Preload a list of images


    <SCRIPT language="JavaScript">
    <!--

    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://mydomain.com/image0.gif";
      image_url[1] = "http://mydomain.com/image1.gif";
      image_url[2] = "http://mydomain.com/image2.gif";
      image_url[3] = "http://mydomain.com/image3.gif";

       var i = 0;
       for(i=0; i<=3; i++) 
         preload_image_object.src = image_url[i];
    }

    //-->
    </SCRIPT>

How is it referenced in the HTML?

You would call the image src normally.
i.e.
<img name="myimage" src="someimage.gif">
<a href="#" onMouseOver="javascript:document.myimage.src='http://mydomain.com/image0.gif'">

All work by eLouai is licensed under a Creative Commons Attribution 3.0 Unported License