smartcoderszone – A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, Twitter and Facebook Scripts

Image preload script using javascript. It is just a simple script that preloads images on loading of the page. It scans images in whole page while loading and assign into the source of image. This script also function for onmouseover and onmouseout, it will change image on mouse over and out, results fast image loading.

Enjoy it

<a onmouseover="imgOver();return true;" onmouseout="imgOut();return true;" href="#">
<img border="0" alt="This image changes when you point at it!" width="17" height="15" />
src="example2.gif"&gt;
</a>

In the  section of the page, we have JavaScript code that preloads the image files and defines the event handler functions:

<script language="JavaScript">
if (document.images)
{
    img_on =new Image();  img_on.src ="images/1.gif";
    img_off=new Image();  img_off.src="images/2.gif";
}

function imgOver()
{
    if (document.images) document.imgName.src=img_on.src;
}

function imgOut()
{
    if (document.images) document.imgName.src=img_off.src;
}
</script>