In this example we preload an image by coding in javascript.
<html>
<head>
<script type="text/javascript">
myimg=new Image();
myimg.src="two.gif";
function ChangeTheImg()
{
document.getElementById('myfrstImage').src=myimg.src;
}
</script>
</head>
<body>
<img id="myfrstImage" onmouseover="ChangeTheImg()" src="One.jpg" width="100" height="100" >
</body>
</html>
In this program we call the function ChangeTheImg() by which we set the source of the previous image.
document.getElementById('myfrstImage').src=myimg.src;
when we put mouse over on the previous image the function is called. It takes no time as the second image is already loaded by the browser.