Document: readyState プロパティ

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Document.readyState プロパティはdocument の読み込み状態を記述します。このプロパティの値が変化すると、readystatechange イベントがdocument オブジェクトに発行されます。

値

文書のreadyState は次のうちのいずれかになります。

loading: この文書 (document) はまだ読み込み中です。
interactive: 文書の読み込みが完了し、文書の解釈はできたが、スクリプト、画像、スタイルシート、フレームなどのサブリソースはまだ読み込み中である。この状態は、DOMContentLoaded イベントが発行されようとしていることを示します。
complete: 文書とすべてのサブリソースの読み込みが完了しました。この状態はload イベントが発行されようとしていることを示しています。

例

さまざまな準備状態

switch (document.readyState) {  case "loading":    // この文書はまだ読み込み中。    break;  case "interactive": {    // この文書は読み込みが終了した。 DOM 要素にアクセスできるようになった。    // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。    const span = document.createElement("span");    span.textContent = "A <span> element.";    document.body.appendChild(span);    break;  }  case "complete":    // ページが完全に読み込み完了。    console.log(      `最初の CSS ルール: ${document.styleSheets[0].cssRules[0].cssText}`,    );    break;}

readystatechange を DOMContentLoaded イベントの代替とする

// DOMContentLoaded イベントの代替document.onreadystatechange = () => {  if (document.readyState === "interactive") {    initApplication();  }};

readystatechange を load イベントの代替とする

// Alternative to load eventdocument.onreadystatechange = () => {  if (document.readyState === "complete") {    initApplication();  }};

readystatechange を DOM の挿入や変更のイベントリスナーとして DOMContentLoaded の前に使用

document.addEventListener("readystatechange", (event) => {  if (event.target.readyState === "interactive") {    initLoader();  } else if (event.target.readyState === "complete") {    initApp();  }});