Wait until an animated gif is complete

[dom24]

Hi,

I'm using an animated gif as a submit button on a form.
What I want is for the user to click the gif, have it run the animation and THEN submit the form.
At the moment when I clcik it it just submits straight away.
Is there any way I can get it to wait until the gif has completed once?

Here is my code at the moment:

<script language="javascript">
<!--

if (document.images) {
var initial = new Image();
initial.src = 'images/stoppost.gif';

var over = new Image();
over.src = 'images/startpost.gif';
}

function ChangeImg(id,name){
document.getElementById(id).src = eval(name + ".src");
}
-->
</script>

<input type="image" align="right" value="submit" name="submitter" src="images/stoppost.gif" alt="Submit Details" onclick="ChangeImg('submitter','over');" onclick="ChangeImg('submitter','initial');">

Thanks.

 

[cLFlaVA]

Not that I am aware of. You might want to make, say, three separate images, and then using setTimeout(), change the images every maybe 1/2 a second, and when the final image shows, then call the form's submit event.

*cLFlaVA
----------------------------
"Holy crip he's a crapple!

 

[dom24]

Does anybody else know how I can do this?
It really would be a pain to do it all in speparate images.

 

[dom24]

Does anybody else know how I can do this?
It really would be a pain to do it all in separate images.

 

[BillyRayPreachersSon]

There is *no* way, using plain old JavaScript, that you can tell if an animated image has finished animating or not.

You can tell if it has finished loading using the onload event, but that is a different thing entirely.

How about not using an animated image (or series of images) at all? Is it really necessary?

Dan

 

[dom24]

I've got a feedback form with a submit button on, and I wanted to use an animated gif as the submit button so it looks like when they click it their answers are being posted. I can do it using onmouseover but obviously that is going to work without clicking to "submit" and jsut hovering over it. Was jsut an idea I wanted to use that's suppose. Suppose I don't have to. Thanks anyway.

 

[BillyRayPreachersSon]

How about swapping out a regular image for the animated one after the submission? That way, the submission will not be affected.

Dan

 

[dom24]

It submits to a different page though.
I want it to run the image, then submit.

 

[BillyRayPreachersSon]

Aaah sorry - I must have misinterpreted what you said:

I wanted to use an animated gif as the submit button so it looks like when they click it their answers are being posted.

I assumed you meant that you simply wanted any old animation, just so that the user could see something was happening (like the globe / flag logo in IE when a page is loading, etc), rather than a graphic that had a specific life-cycle and animated only once.

Would you consider doing that, however? Just having some animated dots, or something? Just to throw a workable alternative into the mix ;o)

Dan

 

[Shukusei]

You could have a bit of JS run through a loop(like a timer, not sure if there's an actual function for this), and then once it's done so many iterations, then submit the form?


It wouldn't be perfect, far from it, but it would give you what you'd like to have done(unless of course the person's on a slow machine/connect and the loop is finished before the animation).


Or you could just do it with a small flash button.

 

[vbkris]

the perfect thing for this is Flash...

Known is handfull, Unknown is worldfull

 

[dom24]

OK thanks for all your help.