Keep an Animated GIF Going After Form Submits

Question

The following works for me in ie6,ie7,chrome but not ff3

document.getElementById("form-name").submit();
var image = document.getElementById("loader-img");
setTimeout(function() { image.src = image.src; },50);

What can I do for more consistency?

Answer 1

Try to set src to blank, then to image again. Second change may also need to be called later (settimeout).

Answer 2

You should do the post asynchronously, if not the UI may hang. Take a look at the jQuery Form Plugin for more information.

Answer 3

Have you tried removing the image node and replacing it? Something like:

var image = document.getElementById("loader-img");
image.parentNode.removeChild(image);
image.parentNode.appendChild(image);

(You might also need to do image.cloneNode(true) in between the remove and append calls.)

Obviously, your HTML needs to be structured so that this doesn't goof up the display.

But, what knut said applies (posting into a hidden IFRAME or using XHR will give you more control). And I'm not sure what you meant by "it's not a form submit, it is a document.location='url' call", so if you clarify the use case and workflow, I might be able to help more.