image.onload = .. の後に image.src = .. を書くのはどうしてですか？

●サンプル
var image = new Image();
image.onload = function(){
　ctx.drawImage(image, 0, 0);
};
image.src = 'hoge.jpg';

●個人的にはこっちのほうがわかりやすい
var image = new Image();
image.src = 'hoge.jpg';
image.onload = function(){
　ctx.drawImage(image, 0, 0);
};


書き順の違いは何でしょうか？
image.onload は image.src = 'hoge.jpg'; のことを指していると思うんですが、var image = new Image(); の後に image.src = 'hoge.jpg';を先に書いたほうがしっくりくるんですが、MDNとか誰かの書いたサンプルとか見ると、image.onload = ... の後にimage.src = ... を記述しています。
上から順番に処理をするのではないのですか？
どっちを先に書いても動きますし、個人的には new Image(); で新たな img 要素を作成して、その画像のソースを設定して、その画像が読み込まれたら処理をすると書いたほうがわかりやすい気がします。
どうして多くのサンプルではimage.onload = ... の後に image.src = ... を書くのでしょうか？

No.1 ベストアンサー 回答者： fujillin 回答日時： 2018/02/23 17:09

こんにちは

先に読み込みを開始すると、キャッシュ等を利用して即座に読み込みが完了してしまう時に、イベントの設定が間に合わないことがあり得るから。
・・・というのが理由ではないでしょうか。

似たような記述が以下にありました。
https://t87r.wordpress.com/2012/01/24/javascript …

この回答へのお礼

ありがとうございました。もんもんとしていた疑問が解決出来ました。

お礼日時：2018/02/23 19:54