Question

I have stumbled across this insane behavior where image.onload gets fired multiple times instead of one.

It will be too long to explain this, so here is a jsfiddle example.

When you click the first time everything seems normal, but the issue begins after the second click and with every click it just LOOPS time and time again.

http://jsfiddle.net/PP2dB/

The question is how to make this fire the image.onload only once per click?

Answer 1

You are essentially defining a new event in the g function, which is called each time you click on the button.

Just define it outside of the function, and everything should work as expected: http://jsfiddle.net/PP2dB/1/