Document: readyState プロパティ

Baseline Widely 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 event
document.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();
  }
});

仕様書

Specification
HTML # current-document-readiness