【 javascript 】画像の読みこみイベントについて

今日からJSの「イベント」についての学習です。
人生には「誕生日」「入学式」「結婚」などのイベントがあります。
javascriptのイベントは「マウスがクリックされた」「ウィンドウがスクロールされた」「キーが押された」などの事象のことです。

イベントが発生した時に発生する関数のことであり、jsではプロパティに関数を代入することで発生させます。
下記のコードでは、onloadプロパティーに関数を設定しています。そうすることで、文章読み込み時に関数が実行されます。

//イベントの発生方法  
window.onload = init;
const init = function(){
    //処理
}

ボディータグのonload属性に代入する！

<body onload="init">

DOMContentLoadedイベントにハンドラを登録する

document.addEventListener('DOMContentLoaded',
  function(){
    // 処理内容
  });

ただ上記の二つは、発生段階が微妙に違うので注意が必要です。

* 読み込み順  
読み込み開始  
HTML文書の読み込み解釈完了  
DOMContentLoaded  
画像などの読み込み  
ウィンドウ全体の読み込み完了  
onload

画像の読みこみに時間がかかるのあれば
DOMContentLoaded でやるといいってことですね！

おしまい

tamakipedia