JavaScript ページ読み込み時に処理を実行するその他の方法

2024-04-07

JavaScript: window.onload vs <body onload="">

window.onload と <body onload=""> は、どちらも JavaScript でページ読み込み時に処理を実行するイベントハンドラです。しかし、いくつかの重要な違いがあります。

動作の違い

window.onload:
- ページ全体の読み込みが完了した後に実行されます。
- 画像やスタイルシートなどの外部リソースも含め、すべてのコンテンツが読み込まれるまで待機します。
<body onload="">:
- HTML の <body> タグが解析された後に実行されます。
- 画像やスタイルシートなどの外部リソースは読み込まれていない可能性があります。

使用例

window.onload:
- ページ全体の読み込み後に実行する必要がある処理に適しています。
- 例:
  - ページ全体の表示を調整する
  - ナビゲーションバーの初期化
  - ログイン処理
<body onload="">:
- <body> 要素の内容に関連する処理に適しています。
- 例:
  - 画像の表示をアニメーション化する
  - フォームの入力チェック
  - コンテンツの表示・非表示を切り替える

互換性

window.onload:
- すべての主要なブラウザでサポートされています。
<body onload="">:
- 古いブラウザではサポートされていない場合があります。

コードの例

// window.onload の例
window.onload = function() {
  // ページ全体の読み込み後に実行される処理
};

// <body onload=""> の例
<body onload="myFunction()">
  ...
</body>

function myFunction() {
  // <body> 要素の内容に関連する処理
}

まとめ

window.onload はページ全体の読み込み後に実行したい処理に、<body onload=""> は <body> 要素の内容に関連する処理に適しています。
互換性を考慮する場合は、window.onload を使用する方が安全です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像の読み込み後に表示</title>
</head>
<body>
  <img src="image.jpg" alt="画像" onload="imageLoaded()">
  
  <script>
    function imageLoaded() {
      // 画像の読み込み後に実行される処理
      alert("画像が読み込まれました！");
    }
  </script>
</body>
</html>

ページ全体の読み込み後にメッセージを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページ全体の読み込み後にメッセージを表示</title>
</head>
<body>
  <h1>ページ読み込み完了</h1>
  
  <script>
    window.onload = function() {
      // ページ全体の読み込み後に実行される処理
      alert("ページの読み込みが完了しました！");
    };
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームの入力チェック</title>
</head>
<body>
  <form onsubmit="return validateForm()">
    <input type="text" name="name" placeholder="名前">
    <input type="submit" value="送信">
  </form>
  
  <script>
    function validateForm() {
      // フォームの入力チェック
      const name = document.querySelector('input[name="name"]').value;
      if (name === '') {
        alert("名前を入力してください！");
        return false;
      }
      return true;
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンテンツの表示・非表示を切り替える</title>
</head>
<body>
  <button onclick="toggleContent()">コンテンツの表示・非表示</button>
  <div id="content" style="display: none;">
    ここにコンテンツが表示されます。
  </div>
  
  <script>
    function toggleContent() {
      const content = document.getElementById("content");
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  </script>
</body>
</html>

アニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アニメーション</title>
</head>
<body>
  <div id="box"></div>
  
  <script>
    window.onload = function() {
      const box = document.getElementById("box");
      box.style.width = "100px";
      box.style.height = "100px";
      box.style.backgroundColor = "red";
      
      // アニメーション処理
      setInterval(function() {
        const x = Math.floor(Math.random() * window.innerWidth);
        const y = Math.floor(Math.random() * window.innerHeight);
        box.style.left = x + "px";
        box.style.top = y + "px";
      }, 100);
    };
  </script>
</body>
</html>

これらのサンプルコードは、window.onload と <body onload=""> の使い方を理解するのに役立ちます。

JavaScript ページ読み込み時に処理を実行するその他の方法

DOMContentLoaded イベントは、HTML の解析が完了し、DOM ツリーが構築された後に発生します。画像やスタイルシートなどの外部リソースはまだ読み込まれていない可能性があります。

document.addEventListener("DOMContentLoaded", function() {
  // ページ読み込み後に実行される処理
});

async 属性

<script> タグに async 属性を指定すると、スクリプトはページの読み込みと並行してダウンロードされ、実行されます。

<script async src="script.js"></script>

defer 属性

<script defer src="script.js"></script>

Intersection Observer API は、要素がブラウザのビューポートに表示されたかどうかを監視する API です。この API を使用して、要素がビューポートに表示された時に処理を実行することができます。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 要素がビューポートに表示された時に実行される処理
    }
  });
});

observer.observe(document.querySelector("#element"));

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // DOM が変更された時に実行される処理
  });
});

observer.observe(document.querySelector("#element"), {
  attributes: true,
  childList: true,
  subtree: true
});