animated gifs not displaying correctly when using setTimeout only in Firefox

**ihavetoeatdinne** · 12-29-2010 06:33 PM

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!

**vwphillips** · 12-30-2010 03:23 AM

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>

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

Thread Tools

Display

animated gifs not displaying correctly when using setTimeout only in Firefox

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions