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:
<!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">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<body onload="playScript();">

<img id="arrow" src="clear.gif" width="144" height="144" />


<script type="application/javascript">
function playScript() {

 setTimeout("document.getElementById('arrow').src ='arrow1.gif';",1000);

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:

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