This is a strange problem, because I have done this about 50 times, but this time it is not working. I want to show a loading gif when a user submits a form.

1. <form id="uploadForm" enctype="multipart/form-data" action="" method="POST">
2.       <!-- DOM omitted. The form submits just fine.
3.       <div id="loadgif"></div>
4. </form>

2. $(function() {
3. $('#uploadForm').submit(function() {
4. $('#loadgif').append('<img src="images/loading.gif" name="load" id="load" alt="Loading, please wait..." /> Uploading, please wait... This may take a few minutes depending on your connection speed.');
5. });
6. });

The annoying part is that it shows the text, but just completely ignores the image. Firefox even shows the image's alt text, but not the image itself. I have used this image many many times on my website and used the exact same code to append it. I am sure that the image is in the specified folder.

As I was writing this, I just noticed something I find very strange; I tried to return false in the function above (so the upload process would not start) and it showed the image. I then removed the return statement, tried again (ctrl + F5) and it worked every time. This was in Chrome, but the same happened in Firefox. Then I tried to close the browsers and try again and it stopped working. Then I could repeat the process of adding/removing the return statement and it would work until I closed the browsers. In IE8, it just works all the time.

I really don't know if I am missing something embarrassing here, but this is really bugging me. The only thing I am doing differently this time is that my form is uploading a file, but I don't see why that would give me a hard time? I never had any problems with showing that image on any of my other pages.

Any ideas?