Changing image source stops working

[Chuck Anderson]

I'm using a simple, pseudo progress bar. Very simply, I display a still
image next to a form submit button until the user clicks on it, and then
I change the image source to an animated version of the still image.

Like so (I use php a lot) ...

-- the submit button and still image --
<input type=submit name="update _stats" value="Update Mailbox Stats"
class="button">
<img id="loading" src="still_image.gif">

-- the onSubmit JavaScript --
<form method="post" action="<?= $_SERVER['PHP_SELF'] ?>"
onSubmit="document.getElementById('loading').src='animated_image.gif';
return true;">

This works great. When I click the submit, the animated gif appears (a
common little spinner) until the page reloads with the still image.
However, after using it a few times (leaving the window open), the
animated gif stops appearing when I click on the submit button.

By playing around I have discovered that if I change the JavaScript,
save the page and reload, it works again (just arbitrarily - I change
"return true" to "return false" - save the page - reload it - change it
back to "return true" - save it - reload it and then it works as
intended again ... a few times ... until it breaks again).

I've tried deleting the cache and using a shift (forced) reload of the
page, but that doesn't help. I'm using Firefox 1.5. Am I doing
something wrong, ... is Firefox doing something wrong, ... or is this
method faulty?

 

[Chuck Anderson]

I'm using a simple, pseudo progress bar. Very simply, I display a still
image next to a form submit button until the user clicks on it, and then
I change the image source to an animated version of the still image.

Like so (I use php a lot) ...

-- the submit button and still image --
<input type=submit name="update _stats" value="Update Mailbox Stats"
class="button">
<img id="loading" src="still_image.gif">

-- the onSubmit JavaScript --
<form method="post" action="<?= $_SERVER['PHP_SELF'] ?>"
onSubmit="document.getElementById('loading').src='animated_image.gif';
return true;">

This works great. When I click the submit, the animated gif appears (a
common little spinner) until the page reloads with the still image.
However, after using it a few times (leaving the window open), the
animated gif stops appearing when I click on the submit button.

Soooo, .... I seem to have figured this out myself (so far so good,
anyway). I needed to preload the second image - the animated gif. It
seems to be working all the time now.