Document.readyState

Document.readyState プロパティは、その文書の読み込み状態を示します。

このプロパティの値が変化するとき、readystatechange (en-US) イベントが document オブジェクト上で発生します。

構文

var string = document.readyState;

値

文書の readyState は次のうちの一つになります。

loading: この文書はまだ読み込み中です。
interactive: この文書は読み込みが終わり、解析が済みましたが、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中です。
complete: この文書とすべての副リソースの読み込みが終わっています。この状態は load イベントがもうすぐ発火することを示します。

例

Different states of readiness

switch (document.readyState) {
  case "loading":
    // この文書はまだ読み込み中。
    break;
  case "interactive":
    // この文書は読み込みが終了した。DOM 要素にアクセスできるようになった。
    // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。
    var 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 = function () {
  if (document.readyState === 'interactive') {
    initApplication();
  }
}

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

// load イベントの代替
document.onreadystatechange = function () {
  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();
  }
});

仕様書

仕様書	状態	備考
HTML Living Standard Document readiness の定義	現行の標準
HTML 5.1 Document readiness の定義	勧告
HTML5 Document readiness の定義	勧告	初回定義

ブラウザーの対応

BCD tables only load in the browser