Preloading Images Using JavaScript

Monday, January 16, 2006

I just added the image preload script to the homepage of the website www.dlangchaps.org. The header and some other images of the website are very heavy. This made the page content load first without loading the header. This javascript sniplet would first load the images into the system cache and then display the page.

The script consists of a function which is added between the <head></head> tags.

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() {
window.status="Loading Images... Please Wait........."
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
window.status="D'LangChaps - Intelligentsia at Work";
}
//-->
</script>


The <body> tag calls this function with the help of "onLoad" attribute.

<body onLoad = "MM_preloadImages('images/dlc.png', 'images/head.png', 'images/logo.png', 'images/navhead.png', 'images/navside.png', 'images/navside1.png', 'images/navbot.png', 'images/news.png')">

This makes the images preload before the actual page is loaded.

0 comments:

Post a Comment