With Javasript and jQuery, we could manipulate images at client side. For example, some images are shown on a mouse hover effect. But if that image is too large, there may be some latency before the image could be rendered. We’d better preload those images to minimize the time delay.
The following example shows you how to preload an image.
<html>
<head>
<script language = "JavaScript">
function preloader() {
preloadImage = new Image();
preloadImage.src = "after.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='after.jpg'">
<img name="img01" src="before.jpg">
</a>
</body>
</html>
If you want to preload more than one file, used the following preloader() function instead.
function preloader() {
var i = 0;
imageObj = new Array();
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
for(i=0; i<4; i++) {
var image = new Image();
image.src = images[i]
imageObj[imageObj.length] = image;
}
}
Done =)
Reference: Preloading and the JavaScript Image() object
Eureka! 