Why doesn't this animated jpg work properly?

Malcolm · Sep 3, 2004

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 = new Image() ;
Weatherpic.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>

Evertjan. · Sep 3, 2004

Malcolm wrote on 03 sep 2004 in comp.lang.javascript:

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>

Try:

var Countdown=24

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

....

<body onLoad='animate()'>

Michael Winter · Sep 3, 2004

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.

May I ask why you don't use an animated GIF with frame delays set to 200ms?

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.

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.

<script language="Javascript">

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

Countdown = 24;

Weatherpic = new Array();
for(i = 24; i >= 0; i--) {

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

[snip]

function animate() {
document.animation.src = Weatherpic[Countdown].src;

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

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

[snip]

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

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

All CRUD operations work except POST. Why?	2	May 28, 2023
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Why doesn't this work in Firefox?	4	Dec 21, 2007
JavaScript animation doesn't work	5	Sep 11, 2003
Why doesn't this for loop work?	5	Oct 28, 2007
Why doesn't this page work with Firefox?	0	May 1, 2007
jQuery 3 part slider	0	Apr 20, 2016
Why is this WordPress comments form not submitting?	1	Jan 12, 2020

Why doesn't this animated jpg work properly?

Malcolm

Evertjan.

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads