Why doesn't this animated jpg work properly?

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>

Malcolm wrote on 03 sep 2004 in comp.lang.javascript:
[color=blue]
> 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>[/color]

Try:

var Countdown=24

function animate() {
document.animation.src = Weatherpic[Countdown].src;
Countdown--;
if(Countdown < 0) Countdown = 24;
setTimeout('animate()',200)"
}

....

<body onLoad='animate()'>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

On Fri, 3 Sep 2004 20:04:29 +0100, Malcolm <malcolm@wrights.me.uk> wrote:
[color=blue]
> 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.[/color]

May I ask why you don't use an animated GIF with frame delays set to 200ms?
[color=blue]
> 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.[/color]

I can think of two possible reasons:

1) The images didn't have time to preload.
2) The images weren't cached due to headers or browser settings.

There might be other explanations.
[color=blue]
> <script language="Javascript">[/color]

The language attribute is deprecated in favour of the (required) type
attribute. The former should not be used any more.

<script type="text/javascript">
[color=blue]
> Countdown = 24;
>
> Weatherpic = new Array();
> for(i = 24; i >= 0; i--) {[/color]

It would be better to use 'Countdown' than a literal.

[snip]
[color=blue]
> function animate() {
> document.animation.src = Weatherpic[Countdown].src;[/color]

You should use the images collection to reference the 'animation' IMG
element:

document.images['animation'].src = ...

[snip]
[color=blue]
> <img name="animation" src="url/radar1.jpg"
> onLoad="setTimeout('animate()',200)">[/color]

I don't know how well the load event is supported on IMG elements. It
might be better to start the to animation when the document loads.

By the way, an alternative to Evertjan's suggestion is:

setInterval(animate, 200);

This means you don't need to keep calling setTimeout. The make sure that
the line above is executed properly add, after the animate() definition:

// animate() function
}
animate.toString = function() {return 'animate();';};

This allows user agents to use the function reference version of
setInterval if it's supported, and fallback to the string version if it's
not.

Good luck,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Why doesn't this animated jpg work properly?

re: Why doesn't this animated jpg work properly?

re: Why doesn't this animated jpg work properly?

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about