JavaScript Image Preload

MagSafe

MagSafe

MagSafe

Associate
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
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.
 
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 said:
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.
Click to expand...

Not quite sure what you mean. You want to load the pictures before the page loads?

You need to define a LookIntoTheFuture routine.

The mouseover routine uses it because it does not want to be displayed when the page loads, but at a later time. So you can use the same script, but triggering it with whatever event you are going to display the picture with.

Do you mean load the page before the pictures have downloaded? I think that's probably browser behaviour instead of coding, but you could probably help things along by defining the sizes of the pictures explicitly.

Could you explain what you want to do?
 
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.
 
Well not trying to rain on your parade, but that's bad practice.

What you are trying to do is override the default behaviour of a browser with your own "The browser should download everything and then display the page".

Have you thought about what might happen if one of your images fails to download (through coding error or server failure). Have you thought about people on dial-up?

I don't think it's a good idea. Generally the people who you are gearing this towards (the ones that will have to wait for it to download), will get annoyed as they have to wait for 10-20 seconds for your site to appear, which they will think is for no reason apart from your site being pants.

If you just want to pre-load a set of images, so that in the future they may be used more quickly, then you already have the code:

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


<body onLoad="javascript:preloader()">
 
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?
 
It's just a cut/paste of your original code.

The onLoad triggers when the body is read/parsed during the display of the page. It triggers the download of the file heavyimagefile.jpg. So if you want to use it later, it has been cached.
 
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.
 
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?
 
You must log in or register to reply here.
Back
Top Bottom