SYNCERのロゴ
アイキャッチ画像

Document.readyState - 読み込み状況

readyStateは、Documentのプロパティです。ドキュメントの読み込み状況を表す文字列を返します。

概要

名前
readyState
所属
Document
IDL
readonly attribute DocumentReadyState readyState;

enum DocumentReadyState { "loading", "interactive", "complete" };
仕様書
https://html.spec.whatwg.org/multipage/dom.html#dom-document-readystate

説明

ドキュメントの読み込み状況を表す下記のキーワードのいずれかを返す。

loading
DOMの解析中。
interactive
DOMの解析が終わり、画像やJavaScript、CSSなど、サブリソースの読み込み中。
complete
全ての読み込みが完了。

チュートリアル

onreadystateで、読み込み状況の変化をキャッチできます。

document.onreadyState = function ( event ) {
	console.log( event ) ;

	if ( document.readyState == "complete" ) {
		console.log( "読み込みが完了しました!!" ) ;
	}
}

デモ

Document.readyStateのデモです。実行する時点では、DOMを完全に解析しきれていないため、"loading"を取得できています。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<body>
<script>
var value = document.readyState ;

console.log( value ) ;	// この下の行をまだ解析してない
document.body.appendChild( new Text( value ) ) ;	// この下の行をまだ解析してない
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。