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
関連情報
readystatechange (en-US)
イベントDOMContentLoaded
イベントload
イベント