javascriptのonloadに複数の関数を登録したい

普通に考えたら当然なんだが、javascriptのonloadに複数の関数を代入しても、最初の関数しか実行されない事を知った。

気付くまでに時間がかかってしまった・・・。

例えば以下のようになっているとする。

function load_image(){
  image = new Image();
  image.onload = function(){ alert("foo"); }
  image.onload = function(){ alert("bar"); }
  image.src = './images/test.png';
}

でもこの状態の時にはbarだけ実行されて、fooは実行されない。
代入してるから当然だよね。

ではどうすればいいのか。

今回、自分がjavascriptを書いていた環境では丁度jQueryを使っていたので、以下のように解決した。

function load_image(){
  image = new Image();
  image.on('load', function(){ alert("foo"); });
  image.on('load', function(){ alert("bar"); });
  image.src = './images/test.png';
}

このようにすればfooもbarも実行される。

じゃあjQueryを使っていない場合は。。。？

これも単純な話で、addEventListener(‘load’)を使えば問題ない。

function load_image(){
  image = new Image();
  image.addEventListener('load', function(){ alert("foo"); });
  image.addEventListener('load', function(){ alert("bar"); });
  image.src = './images/test.png';
}

これで、jQueryを使わなくてもfooもbarも実行することができた。