DOMContentLoaded

DOMContentLoaded イベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に発火し、 スタイルシートや画像、サブフレームの読み込みが終わるのを待ちません。 ページが完全に読み込み終わったことを検知するためにのみ、全く異なるイベント ─ load ─ を使用するべきです。 DOMContentLoaded がより適切である場合に load を誤って使用することが、 信じられないほど頻繁に行われています。

スピードアップ

もしも、ユーザーがページをリクエストした後に、DOMを出来るだけ速く解析したいならば、あなたができることがいくつかあります。 JavaScript の非同期化 と スタイルシートの読み込みの最適化 です。何もしなければページと並行して読み込まれる為に、メインのHTMLドキュメント から転送量を"奪って"いきます。

全般

仕様

HTML5

インターフェイス

Event

Bubbles

Yes

キャンセル可能

Yes (シンプルなイベントとして指定された場合にはキャンセル不可能)

Target

Document

規定の動作

なし

プロパティ

例

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++)
{} // この同期スクリプトはDOMの解析を遅らせます。そして DOMContentLoaded イベントはその後に起動します。
</script>

ブラウザでの実装状況

[1] このイベントのバブリングは少なくとも Gecko 1.9.2, Chrome 6, Safari 4 でサポートされています。

[2] Internet Explorer 8 は readystatechange event をサポートしており、これは DOMが準備できている状態かどうかを検知するために使用できます。Internet Explorer のより低いバージョンでは、この状態の検知は document.documentElement.doScroll("left");の実行を繰り返し試みることで検知できるでしょう。このスニペットは、DOMの準備が調うまではエラーをスローします。

関連情報

• DOMContentLoaded
• readystatechange
• load
• beforeunload
• unload