非同期JSロードを考慮した Load イベントの記述方法

JavaScript でページが表示されるタイミングで何かしらの処理を行いたい場合、諸事情で jQuery などが使えない環境なら addEventListener(), document.onload あたりを使用すると思います。

document.addEventListener(
  "DOMContentLoaded", function(){/* 初期化処理 */}, false);

しかし、表示高速化のために HTML 側でスクリプトの読み込みを非同期で行うよう記述してしまうと、スクリプトが実行している時点で既に DOM の生成やページの読み込みが終わっていてイベントが起動しなくなります (正確にはごくまれにするが)。

<script type="text/javascript" src="x.js" async defer></script>

これは JavaScript の非同期ロードを止めるか (パフォーマンスを犠牲にできる場合)、あるいは以下のように既にロード済みであればイベントハンドラを直接呼び出すこと (微細な不確実さが許容できる場合) で対応することができます。汎用性が必要な JavaScript ライブラリを実装しているのであれば考慮しておくと良いですね。

function handler(){/* 初期化処理 */}

if(document.readyState == "interactive"
|| document.readyState == "complete"){
  handler();
} else {
  document.addEventListener(
    "DOMContentLoaded", handler, false);
}

jQuery の場合も既に DOM がロード済みなら jQuery.ready() は即時実行してくれますが、$(document).load() はそこまで面倒見てくれないみたいですね。ページロードのイベントハンドラが突然実行されなくなった時の考慮点として思い出すか、あるいは検索でこのページが引っかけられると良いかなと思います。