Preloading an image file

Overview

This is JavaScript code to load image background for the next page when browser displays current page. When ``Next'' link is clicked to display the next image, the image is actually loaded from cache and it causes fast page display.

Flow

Pass an image file name to be loaded by onLoad method of JavaScript when the page is loaded.
Read the image file on JavaScript.

A sample code

 print <<END;
 <head>
 <script language="Javascript">
 nextimage = new Image();
 function preload(nextpic){
        if (nextpic != ''){
                nextimage.src = nextpic;
        }
 }
 </script>
 </head>
 END
 
 print "<BODY onLoad=\"preload(\'$nextimage\')\">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               \n";
 
 print "<a href=\"$nextimage\">Next image</a>\n";

Description of the code

 print <<END;
 <head>
 <script language="Javascript">
 nextimage = new Image();
 function preload(nextpic){
        if (nextpic != ''){
                nextimage.src = nextpic;
        }
 }
 </script>
 </head>
 END

These part is rounded by <head> tag of the HTML page. Define nextimage as an Image object. Define the function preload and the passed image file is loaded into nextimage.src, the browser loads the image without displaying. This occurs in background.

 print "<BODY onLoad=\"preload(\'$nextimage\')\">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               \n";

Add onLoad method in the <body> tag and invoke preload when the browser opens this page. In this time, $nextimage is passed to the Javascript code.

 print "<a href=\"$nextimage\">Next image</a>\n";

When this link is clicked, the $nextimage is loaded from the cache of the browser.