www.webdeveloper.com
Results 1 to 2 of 2

Thread: animated gifs not displaying correctly when using setTimeout only in Firefox

  1. #1
    Join Date
    Dec 2010
    Posts
    1

    animated gifs not displaying correctly when using setTimeout only in Firefox

    I am trying to make a simple image change involving an animated gif using javascript. After 5 seconds, the original image (which is simply a transparent pixel gif) changes to an animated gif.

    in the body:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    </head>
    
    <body onload="playScript();">
    
    
    <img id="arrow" src="clear.gif" width="144" height="144" />
    
    
    </body>
    </html>
    
    <script type="application/javascript">
    function playScript() {
    
     setTimeout("document.getElementById('arrow').src ='arrow1.gif';",1000);
    
    
    }
    </script>
    This works fine in all browsers except firefox. The strange problem is that in firefox, the animation is frozen at a random frame. However, after playing around a bit, I made the gif animate correctly by replacing the original image, "clear.gif" with an empty string "". (I found that any string that does not link a real image will make the animated gif work correctly.)

    To clarify, this is what makes the animation work in ffx:

    Code:
    <img id="arrow" src="" width="144" height="144" />
    I know this isn't a problem with the gif itself, because displaying the gif in firefox does not produce any issues.

    Does anyone know why these problems are occurring in firefox? I'd like not to have to use a broken src link to make it work, and it's weird that that's a way to solve the animation issues.

    Thanks!

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    
    function playScript(){
    
     setTimeout(function(){ document.getElementById('arrow').src ='http://www.vicsjavascripts.org.uk/StdImages/One.gif'; },1000);
    
    
    }
    </script>
    </head>
    
    <body onload="playScript();">
    
    
    <img id="arrow" src="clear.gif" width="144" height="144" />
    
    
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles