DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。一方、loadイベントはDOMツリーに加えて画像やすべてのスクリプトが読み込まれた時点で発火されます。よって特に画像に関する処理を行わない限りページの初期化はDOMContentLoadedイベントを利用するのが良いでしょう。
WebブラウザにおけるJavaScriptの処理の流れ（1〜3）を大まかに記述します。
1. WebブラウザはグローバルオブジェクトであるWindowオブジェクトを生成します。そしてWindowオブジェクトのプロパティとしてDocumentオブジェクトが生成されます。
2. DocumentオブジェクトはDOMツリーを読み込んでいきます。解析が終わるとDOMContentLoadedイベントが発火されます。
|
1 2 3 |
document.addEventListener('DOMContentLoaded', function(){ 〜処理〜 },false); |
3. DOMツリーの構築が完了した後に、画像が読み込まれていきます。読み込みのすべてが完了するとWindowオブジェクトに対してloadイベントが発火されます。
|
1 2 3 |
window.addEventListener('load', function(){ 〜処理〜 },false); |
関連ページ
イベントハンドラー／イベントリスナーについて[addEventListener]
jQueryを実行する[jQuery3.x][jQueryオブジェクト][jQuery関数]
参照文献
