JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでドキュメントの読み込み状態（readyState）を確認する方法

JavaScriptでドキュメント（ページ）の読み込みが完了しているかどうかを確認するには、document.readyStateプロパティを使用します。このプロパティは、現在のドキュメントの読み込み状況に応じて以下の3つの文字列を返します。

  • loading … ドキュメントがまだ読み込み中の状態
  • interactive … ドキュメントの解析は完了したが、画像などのサブリソースは still 読み込み中の状態
  • complete … ドキュメントとすべてのサブリソースの読み込みが完了した状態

以下は、ボタンをクリックしたタイミングでdocument.readyStateの値を判定し、ページの読み込み状態を表示するシンプルな例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>ドキュメントの読み込み状態を確認する</h1>
<div class="result"></div>
<button class="Btn">チェック</button>
<h3>上のボタンをクリックしてドキュメントの状態を確認してください</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    resEle.innerHTML = document.readyState + "<br><br>";
    BtnEle.addEventListener("click", () => {
        if (document.readyState === "complete") {
            resEle.innerHTML = "ページの読み込みが完了しました";
        } else {
            resEle.innerHTML = "ページはまだ読み込み中です";
        }
    });
</script>
</body>
</html>

実行結果

ページを開くと、現在のreadyStateの値が画面に表示されます。

JavaScriptでドキュメントの読み込み状態（readyState）を確認する方法

「チェック」ボタンをクリックすると、読み込み状態に応じたメッセージが表示されます。

JavaScriptでドキュメントの読み込み状態（readyState）を確認する方法

補足：読み込み完了のタイミングを検知したい場合

ボタン操作ではなく、ページの読み込み完了を自動的に検知したい場合は、DOMContentLoadedイベントやwindow.onload、あるいはdocument.onreadystatechangeイベントを利用すると便利です。特に、スクリプトがDOM要素を操作する前には、readyStateが「complete」になっているか、またはこれらのイベントを待つことでエラーを防ぐことができます。

  1. 【JavaScript】変数が配列かどうか判定する3つの方法（isArray・instanceof・constructor）

    JavaScriptでは、ある変数が配列（Array）であるかどうかを判定したい場面はよくあります。本記事では、代表的な3つの判定方法を、サンプルコードと出力結果付きでわかりやすく解説します。 1）Array.isArray() メソッド Array.isArray() メソッドは、引数として渡された変数が配列かどうかをチェックします。変数が配列であれば true を返し、そうでなければ false を返します。ES5以降で利用できる標準メソッドであり、現在最も推奨されている判定方法です。 構文 Array.isArray(variableName) 例 <html> <

  2. JavaScriptでNaNがNaNであるかどうかを確認する方法

    NaN（Not a Number）は、JavaScriptにおいて唯一「自分自身と等しくない」という特殊な性質を持つ値です。他の値であれば自分自身と比較すると等しくなりますが、NaNだけは例外で、NaNとNaNを比較しても等しいと判定されません。例1：== 演算子ではNaNを判定できない<html> <body> <script> var val = 54/the; document.write(val); document.write(</br>); if(val == NaN) { docume