■ img要素に対するonloadイベント設定タイミング　（JavaScript版）

　画像を動的にロードして、onloadイベントを実行したい場合の記述方法を示す。

・画像のロード（img.src = …）は、src属性にURLを設定した時点で即非同期のリクエストが飛ぶ。
・リクエスト完了前（画像のロード完了前）に次行に処理が移る可能性がある。
・従って、src属性に値を設定する前にonloadイベントリスナを記述する必要がある。

　方法１が正解で、方法２、方法３ではうまくいかない場合がある。
　　・方法２ではimgのロード完了後に次行に制御が移ることあり、この時指定の処理は実行されない。
　　・方法３ではimgのロード完了前に次行に制御が移ることあり、この時も正しく描画されない。
　方法１では予めimgロード時の処理を設定しており、実際にimgがロードされるとその処理が実行される。

---

　　 　　 　　 　

---

● 各方法の説明：　（画像を縮小して表示する）

//....................................
  function proc1() { // 方法１
//....................................
    g.clearRect(0, 0, w, h);

    img.onload = function() {
      g.drawImage(img, 0, 0, w/2, h);
      g.drawImage(img, x1, y1, w/4, h/2);
    };
    img.src = "pic.jpg";
  }

//....................................
  function proc2() { // 方法２
//....................................
    g.clearRect(0, 0, w, h);

    img.src = "pic.jpg";

    img.onload = function() {
      g.drawImage(img, 0, 0, w/2, h);
      g.drawImage(img, x1, y1, w/4, h/2);
    };
  }

//....................................
  function proc3() { // 方法３
//....................................
    g.clearRect(0, 0, w, h);

    img.src = "pic.jpg";

    g.drawImage(img, 0, 0, w/2, h);
    g.drawImage(img, x1, y1, w/4, h/2);
  }