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 イベントが発行されようとしていることを示しています。

さまざまな準備状態

js
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 イベントの代替とする

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

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

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

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

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

仕様書

Specification
HTML
# current-document-readiness

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
readyState

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報