Preload multiple images on a webpage

In order to speed up a web page with a lot of images, you can use JavaScript to plug on that page. In the <head> tag, use the following script:

function preload_images(){
var Img = new Array();
Img[0]= “ser_remodeling_pop.jpg”;
Img[1]= “ser_indoor_pop.jpg”;
Img[2]= “ser_outdoor_pop.jpg”;
Img[3]= “ser_newconstruction_pop.jpg”;
Img[4]= “ser_additions_pop.jpg”;
Img[5]= “ser_breakerpanel_pop.jpg”;
Img[6]= “ser_electricityupgrades_pop.jpg”;
Img[7]= “ser_conversion_pop.jpg”;
Img[8]= “ser_codecompliance_pop.jpg”;
Img[9]= “ser_troubleshooting_pop.jpg”;

var imageObj = new Image(250,167);

for(var i=0; i<10; i++){ imageObj.src = “images/”+Img[i]; } }

Then in the <body> tag, you have to call the javascript function to load all images above to the page. If you don’t have this function call on the <body> tag, images won’t load as expected.

<body onload=”preload_images()”>

Remember to put parentheses () at the end of a function call, otherwise it won’t work.