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

JavaScriptでjQueryの$(document).ready()と同等の処理を実装する方法

jQueryの$(document).ready()とは？

jQueryでは、ページ上でイベントを確実に動作させたい場合、その処理を$(document).ready()関数の中に記述するのが基本です。この関数内に書かれたコードは、DOMの読み込みが完了した直後、つまり画像や動画などのページコンテンツがすべて読み込まれる前に実行されます。

$(document).ready(function() {
    alert("ドキュメントの読み込みが完了しました！");
});

純粋なJavaScriptで同じ処理を実現する方法

jQueryに頼らず、素のJavaScriptだけで$(document).ready()と同じ結果を得たい場合は、setIntervalとdocument.readyStateを組み合わせた次のようなコードが使えます。

<html>
<body>
<script>
var loader = setInterval(function () {
  if (document.readyState !== "complete") return;
  clearInterval(loader);
  alert("ドキュメントの読み込みが完了しました！");
}, 300);
</script>
</body>
</html>

コードの仕組み

  • setInterval：300ミリ秒（0.3秒）ごとにチェック処理を繰り返し実行します。
  • document.readyState：ドキュメントの読み込み状態を表すプロパティです。「complete」以外の場合は何もせず、次のチェックを待ちます。
  • clearInterval：読み込みが完了したらタイマーを解除し、目的の処理（ここではアラート表示）を実行して終了します。

補足：DOMContentLoadedイベントという選択肢

よりシンプルでモダンな方法としては、標準イベントであるDOMContentLoadedを利用するのもおすすめです。これはHTMLの解析とDOM構築が完了した時点で発火するイベントで、追加のライブラリやタイマー処理が一切不要になります。

document.addEventListener("DOMContentLoaded", function () {
  alert("ドキュメントの読み込みが完了しました！");
});

状況に応じて使い分けることで、jQueryなしでも安全にDOM操作を行うことができます。

  1. JavaScriptの型強制（Type Coercion）とは？仕組みを初心者向けにわかりやすく解説

    型強制（Type Coercion）とは、あるデータ型が自動的・暗黙的に別のデータ型へと変換される仕組みのことです。JavaScriptは動的型付け言語であり、開発者が明示的に型を指定しなくても、状況に応じて値の型が自動的に変換されます。特に注意が必要なのが「+」演算子です。片方が文字列の場合、数値は文字列に変換されて文字列の連結として処理されます。一方、「-」「*」「/」などの算術演算子では、文字列は数値へ変換されるため、挙動の違いを理解しておくことが重要です。以下に、JavaScriptにおける型強制の動作を確認できるサンプルコードを示します。サンプルコード<!DOCTYPE htm

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

    JavaScriptでドキュメント（ページ）の読み込みが完了しているかどうかを確認するには、document.readyStateプロパティを使用します。このプロパティは、現在のドキュメントの読み込み状況に応じて以下の3つの文字列を返します。loading … ドキュメントがまだ読み込み中の状態interactive … ドキュメントの解析は完了したが、画像などのサブリソースは still 読み込み中の状態complete … ドキュメントとすべてのサブリソースの読み込みが完了した状態以下は、ボタンをクリックしたタイミングでdocument.readyStateの値を判定し、ページの読み込み状