JavaScript - Animated gif to remain static until clicked?

Question

I have the .gif set to loop only once and I used this tiny code to activate it on click:

<img src="bird.gif" onclick='this.src=this.src'/>

The problem, is, the gif currently plays when the page loads, which I don't want. I need the image to remain static until clicked.

I could just swap a static image out with the animated one, using this:

<img src="bird2.gif" onclick="changeImage(this)" />
<script>
 function changeImage(element) {
     element.src = element.bln ? "bird2.gif" : "bird.gif";
     element.bln = !element.bln;
 }
</script>

But then you'd have to click it twice before it will play again (like an on/off switch), which is kinda clunky and less desirable.

Does anyone have any solutions? Need it to be static on load, and then it will play every time it is clicked. Thanks

edit: These answers seem like the solution, but they're not working for me. The images are remaining static. I don't know what everyone else sees on their screens but I'm running in Chrome and it's just still after clicking or mousing over.

Answer 1

Inside your changeImage function you can call setTimeout to make the image swap back to the static version when the animation is complete.