JavaScript Image Preload

MagSafe · 6 Oct 2006 at 14:29

Hi there,

Just trying to get hold of an image preload script, but all I can find is ones for using on rollovers.

I've got this so far:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script language = "JavaScript">
function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>

<body onLoad="javascript:preloader()">

<img src="" alt="Heavy Image File" width="200px" height="100px" />

</body>
</html>

...but not sure on what to put within the img src tags?

Also, is that script going to multi-browser compatible?

Thanks for any help given,

Steven.

MagSafe · 6 Oct 2006 at 14:48

I looked at doing that, but for the code to work it has to been within the OnMouseOver function, and all I want is for images to preload before the page displays, none of this hovering business.

MagSafe · 6 Oct 2006 at 20:10

Hey JonC, thanks for the reply

What i'm looking to do is load a selection of images, say around 7 of them into the users cache whilst the page is loading in a browser. When the page appears to the user it already has all the images loaded.

So for example, i have a top banner that loads random 770x110 images everytime the page loads, only one image is displayed at the one time and i want it to be displaying already when the user first sees the website, instead of having to wait for it to load.

This would also be helpful if i was using an image for a background that repeated across or down a page, instead of the user seeing behind the background because the image hasent yet loaded, the background is already there because it has been preloaded into the users cache.

MagSafe · 8 Oct 2006 at 13:06

anyone?

MagSafe · 8 Oct 2006 at 14:54

Thanks for replying JonC

I completey agree with you about the large images, it will take people on dialup, and maybe even users on broadband a while for the page to finish loading. Its my boss who came up with the idea and wants me to figure out how to do it, but i might just explain to him that it isn't such a good idea ... I wouldn't mind learning how to do it for future use though.

I'd still like the smaller images to preload though like 1 pixel width backgrounds and rollover effects, so just wondering that script you've included actually does?

MagSafe · 8 Oct 2006 at 19:09

oh right... i see, hmm yeah maybe that could be useful

isn't there any scripts though that will preload 4 (very small) images into the page before the page is actually displayed ... its just so the user doesn't see the normal coloured background.

MagSafe · 10 Oct 2006 at 14:29

I've been trying to get this script to work:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">
<!--
 function Preload()
 {
	var args = simplePreload.arguments;
	document.imageArray = new Array(args.length);
	for(var i=0; i<args.length; i++)
	{
		document.imageArray[i] = new Image;
		document.imageArray[i].src = args[i];
	}
 }
-->
</script>
</head>

<body onLoad="Preload('banners/harbour.png', 'banners/rodneygardens.png', 'banners/kirn.png')">

<img src="banners/harbour.png" alt="Heavy Image File" width="770px" height="110px" />
<img src="banners/rodneygardens.png" alt="Heavy Image File" width="770px" height="110px" />
<img src="banners/kirn.png" alt="Heavy Image File" width="770px" height="110px" />
<img src="banners/beach.png" alt="Heavy Image File" width="770px" height="110px" />
<img src="banners/paisley.png" alt="Heavy Image File" width="770px" height="110px" />

</body>
</html>

Is there anything i'm doing wrong?