[JavaScript] ドキュメントの読み込み後に処理を実行するコード

サンプルコード

if (document.readyState !== 'loading') {
  eventAfterLoad();
} else {
  document.addEventListener('DOMContentLoaded', eventAfterLoad, false);
  // or window.addEventListener("load", eventAfterLoad);
}

解説

昔は下記のようなコードが多かったですが、最近では諸事情で上手く機能しなくなってきました。

// 最近は機能しない
window.addEventListener("load", eventAfterLoad);

何が変わったのかといえば、scriptタグにasyncオプションが使われるようになった影響が大きいです。

<!-- loadイベントは呼びされないことがある -->
<script async src="app.js"></script>

asyncは非同期読み込みなので、読み込まれた時点でloadイベントの呼び出しが終わっていれば、もう呼び出してもらえません。

その為、document.readyStateを確認して、loadイベントが終わっている場合は自分で呼び出します。

尚、DOMContentLoadedとloadの違いは、前者はDOMの読み込み後、計算前に呼び出され、後者は計算後に呼び出される点です。

その為、DOM要素の計算後の値（高さや幅など）が必要な場合はloadを使い、それらが必要ない場合はDOMContentLoadedを使います。

以上です。