JavaScript

JavaScript's readyState is a property that indicates the loading and parsing status of a document.

readyState [property]

　readyStateプロパティは、HTMLドキュメントまたは外部リソースの読み込み状態を示します。このプロパティは主に、ドキュメントがウェブブラウザで完全に読み込まれ、解析された後に JavaScriptが動作するようにするために使われます。

　readyStateプロパティには、主に以下の３つの値があります。

loading

ドキュメントがまだ読み込み中であることを示します。

interactive

ドキュメントは読み込まれていますが、すべてのリソースが完全に読み込まれたわけではありません。この状態では、ユーザーはページと対話できます。

complete

ドキュメントとすべてのサブリソースが読み込まれ、完全に解析されたことを示します。この時点で、ページ上のすべてのプロセスとイベントハンドラが利用可能です。

Sample

　以下のサンプルコードは、ドキュメントの readyStateをチェックし、ページの読み込み状態に応じたアクションを実行する方法を示しています。

<div class="container">
	<div class="status">Checking document state...</div>
</div>

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5em;
	font-family: Arial, sans-serif;
}
.status {
	text-align: center;
}

function updateStatus(message) {
	document.querySelector('.status').textContent = message;
}

document.addEventListener('readystatechange', () => {
	switch (document.readyState) {
		case 'loading':
			updateStatus('Document is loading...');
			break;
		case 'interactive':
			updateStatus('Document is interactive, but not fully loaded.');
			break;
		case 'complete':
			updateStatus('Document is fully loaded.');
			break;
		default:
			updateStatus('Unknown document ready state.');
			break;
	}
});

　このコードでは、<div class="status"> 要素内のテキストを、現在の readyStateに基づいて更新します。document.addEventListenerを使用して、readystatechangeイベントに対するリスナーを設定します。このイベントは、readyStateプロパティの値が変化するたびに発火されます。ドキュメントの状態に応じて、updateStatus関数を呼び出してユーザーに現在の読み込み状態を通知します。