Why doesn't this animated jpg work properly?

Discussion in 'Javascript' started by Malcolm, Sep 3, 2004.

  1. Malcolm

    Malcolm Guest

    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>
     
    Malcolm, Sep 3, 2004
    #1
    1. Advertising

  2. Malcolm

    Evertjan. Guest

    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()'>



    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress,
    but let us keep the discussions in the newsgroup)
     
    Evertjan., Sep 3, 2004
    #2
    1. Advertising

  3. On Fri, 3 Sep 2004 20:04:29 +0100, Malcolm <> wrote:

    > 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.

    <script type="text/javascript">

    > 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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 3, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Saunders
    Replies:
    2
    Views:
    2,286
    John Saunders
    Jun 4, 2004
  2. John Salerno
    Replies:
    3
    Views:
    620
    John Salerno
    Feb 2, 2006
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,228
    Smokey Grindel
    Dec 2, 2006
  4. Tlink

    Animated gif/jpg

    Tlink, Jan 7, 2007, in forum: ASP .Net
    Replies:
    5
    Views:
    420
    bruce barker
    Jan 7, 2007
  5. Replies:
    6
    Views:
    329
    Old Wolf
    Mar 14, 2005
Loading...

Share This Page