JavaScript ロードイベント

1. JavaScript ロードイベントの基本

ロードイベント（Load Events）は、ブラウザが要素の読み込みを完了した際に発生します。
ウェブ開発において最も重要なロードイベントは以下の2つです。

• DOMContentLoaded: HTMLの準備が整ったタイミング
• load: ページ全体、画像、CSSなどのすべての読み込みが完了したタイミング

2. DOMContentLoaded

DOMContentLoaded イベントは、ブラウザがHTMLを完全に読み込み、DOMツリーを構築した直後に発火します。この時点では、画像やスタイルシート（CSS）などの外部リソースの読み込みが完了しているとは限りません。

DOMContentLoaded は、ユーザーインターフェース（UI）の初期化、イベントハンドラーの付着、およびDOMの準備さえ整っていれば実行可能なアクションに最適です。

コード例

<p id="demo"></p>

<script>
// documentにイベントリスナーを追加
document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("demo").innerHTML = "HTMLの読み込みとDOMの構築が完了しました！";
});
</script>

3. Window Load（ウィンドウ・ロード）

load イベントは、画像、スタイルシート、サブフレームなどの依存するすべての外部リソースを含め、ページ全体が完全に読み込まれたときに発火します。

load イベントは、すべてのリソースが利用可能であることを前提とするアクションに適しています。例えば、画像の寸法（幅・高さ）を取得したり、ブラウザの種類の最終確認を行ったりする場合です。

コード例

<p id="demo"></p>

<script>
// windowにイベントリスナーを追加
window.addEventListener("load", function () {
  document.getElementById("demo").innerHTML = "ページ内のすべてのリソースが読み込まれました！";
});
</script>

4. その他の要素におけるロードイベント

load イベントは、ページ全体だけでなく、リソースを取得する他のHTML要素にも使用できます。

5. 画像（Image）のロード監視

特定の画像が読み込まれたタイミングを検知する実装例です。

コード例

<img id="myImg" src="https://www.google.com/images/google_green.jpg" width="120">

<p id="demo"></p>

<script>
const img = document.getElementById("myImg");

// imgエレメントにイベントリスナーを追加
img.addEventListener("load", function () {
  document.getElementById("demo").innerHTML = "画像の読み込みが完了しました！";
});
</script>