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

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

構文

var string = document.readyState;

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

loading
この文書はまだ読み込み中です。
interactive
この文書は読み込みが終わり、解析が済みましたが、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中です。
complete
この文書とすべての副リソースの読み込みが終わっています。The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

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 の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
readyStateChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9
補足
完全対応 9
補足
補足 Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.
完全対応 8
補足
補足 Only supports 'complete'.
Opera 完全対応 11
補足
完全対応 11
補足
補足 Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11
補足
完全対応 11
補足
補足 Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
Safari iOS 完全対応 5Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, fscholz, AshfaqHossain, ethertank
最終更新者: mdnwebdocs-bot,