Image loading in the middle of a script?

[jdavidw13]

Hi all,
Well I've made a script that controls a little animated character. I'm making him interact with the users, just to provide a little life to a dead page. Basicly, the script goes through an endless loop calling a personality function, which gets him to do what he does, then it calls an animation function which will update his position on the screen and flip the current image to be displayed, based on whether he's walking or talking or whatever. I don't want to preload all his images for everything he does, because as I add more personality, it could add up to lots of images. What I want to do is preload some basic images, for walking left and right, ect., then when he changes personality, load the images for that personality. I really don't know how to load images in the middle of the script, and any help would be appreciated.
Thanks all,
JD

[caldasgsm]

var preload = new Image()
preload.src = "file.gif"

[jdavidw13]

Ok, sorry I wasn't too specific about my question. I wrote a function like so:

function loadimages(personalityset)
{
if(personalityset==1) //load images for personality 1
{
var image1=new Image();
image1.src="image.gif"
...
}
else if(personalityset==2) //load images for personality 2
{
var image2=new Image();
image2.src="image.gif";
...
}
...
}

I put this function in the head of my html file. I called the loadimages function in my script, which
is in the body section, then tried to use the image1 varible. It gave me an unreferenced varible error. So how do I get the images to load then use them later in my script?

[jdavidw13]

I mean how do I load the images in the middle of my script and use them?

[caldasgsm]

1st if you want to preload the images you shouldn't load them inside a function or in the middle of the 'action'
and then to use them just assign the same src to a image in the page.. nothing more...
ex:
<script>
//the browser will start to download the images as soon as e parses the script
var a = new Image();
a.src = "walking.gif";
var a = new Image();
a.src = "jumping.gif";

function setMood(mood)
{

switch(mood)
{
case 1 :
puppet.src = "walking.gif";
setTimeout('setMood(2)',1000);
break;
case 2 :
puppet.src = "jumping.gif";
setTimeout('setMood(1)',1000);
break;
}

}

setTimeout('setMood(1)',2000);

</script>



<img ID="puppet" src="waiting.gif" >

[jdavidw13]

Thanks, this helps :) I've got an idea where to put this in my script...
Thanks again,
JD