I'm afraid I'm a newbie to javascript coding, so I hope this isn't too silly
a question. Basically I'm trying to display a simple animation of a sequence
of 24 hourly rain radar pictures (radar1.jpg, radar2.jpg etc). I'm
preloading the pictures into an array, then displaying the pictures in
sequence using setTimeout to call the animate() function to load the next in
the sequence as each one is displayed. Nothing clever, and it's no more than
my adaptation of a couple of similar examples I found on the net.
Trouble is, instead of loading the pictures once and displaying them from
this cache, it loads them all at the start, then reloads them again each
time they are actually displayed. Can anyone see if I've done something
wrong or can explain what is happening please? Sorry the code is not very
elegant.
Code follows >>>>>>
<title>24 hour rain radar</title>
<script language="Javascript">
Countdown = 24;
Weatherpic = new Array();
for(i = 24; i >= 0; i--) {
Weatherpic[i] = new Image() ;
Weatherpic[i].src = "url/radar" + i + ".jpg";
}
function animate() {
document.animation.src = Weatherpic[Countdown].src;
Countdown--;
if(Countdown <= 0) {
Countdown = 24;
}
}
</script>
</head>
<body>
<img name="animation" src="url/radar1.jpg"
onLoad="setTimeout('animate()',200)">
</body>
