Firefox onsubmit image change

I have a form with a file field and a submit button, used for uploading file (obviously). When the form is submitted i was to display a little spinner to indicate that the upload is taking place.

So on the form i have onsubmit="document.getElementById('spinnerholder').innerHTML='<img src\'spinner.gif\'\ \/>'"

spinnerholder currently contains an image called blank.gif, this should be replaced by spinner.gif when the form is submitted.

Firefox doesn't like this, the gif is not displayed. I put the same code on a button (see below) and it worked fine:

<button onclick="document.getElementById('spinnerholder').innerHTML = '<img src=\'spinner.gif\' \/>'">click me</button>

After much head banging against walls and tables and putting alerts at various points in the page, i decided to put another line of javascript in front of the line in the onsubmit:

onsubmit="document.getElementById('spinnerholder').innerHTML='uploading'; document.getElementById('spinnerholder').innerHTML='<img src\'spinner.gif\'\ \/>'"

So all its doing is changing the contents of the holder from an image to text to another image. And now it works fine. Yaaaaay go FireFox

UPDATE:
That fix didn't work it turns out, it was only because the image was elsewhere on the page that it appeared to work. However, that did lead me to a solution, which was to preload the spinner.gif in the form of a background image. This does work and has been tested.