JavaScriptのwindow.onloadの使い方と注意点を初心者向けに解説

1. window.onloadとは何か？

1. window.onloadとは何か？

JavaScriptのwindow.onloadは、ウェブページの読み込みが全て完了したタイミングで処理を実行するためのイベントです。HTMLだけでなく、画像やスタイルシート、外部スクリプトなども読み込み終わるまで待つため、ページ全体が安定している状態で処理を行えます。初心者でもページ表示後に安全に操作したい場合に便利です。

2. 基本的なwindow.onloadの書き方

2. 基本的なwindow.onloadの書き方

基本的な書き方はとてもシンプルです。window.onloadに関数を代入して、処理内容を書くだけです。

window.onload = function() {
  alert("ページの読み込みが完了しました！");
};

この例では、ページが完全に読み込まれるとアラートが表示されます。画像やCSSが多いページでも安全に処理が開始されます。

3. 複数の処理を同時に登録するときの注意点

3. 複数の処理を同時に登録するときの注意点

window.onloadは1つの関数しか登録できないため、後から別の処理を上書きしてしまう危険があります。複数の処理を同時に実行したい場合は、関数をまとめて書くか、addEventListenerを使う方が安全です。

window.onload = function() {
  console.log("最初の処理");
};

window.onload = function() {
  console.log("後から追加した処理");
};
// 結果: "後から追加した処理"だけ実行される

このように、上書きされる点に注意が必要です。

4. 複数処理を安全に書く方法

4. 複数処理を安全に書く方法

複数の処理を登録したい場合はaddEventListenerを使うのが一般的です。loadイベントを使えば、上書きされずに順番通りに実行できます。

window.addEventListener("load", function() {
  console.log("最初の処理");
});

window.addEventListener("load", function() {
  console.log("後から追加した処理");
});
// 結果: "最初の処理" → "後から追加した処理" 両方実行される

これにより安全に複数の処理を実行でき、ページ全体のロード完了後にまとめて処理できます。

5. 画像や外部リソースを扱うときのメリット

5. 画像や外部リソースを扱うときのメリット

画像や外部リソースが多いページでは、window.onloadを使うメリットがあります。例えば、スライドショーや画像ギャラリーの初期化など、全ての画像が表示されるのを待ってから処理することで、表示の崩れやエラーを防げます。

window.onload = function() {
  const images = document.querySelectorAll("img");
  images.forEach(img => {
    console.log(img.src + " が読み込み完了");
  });
};

全ての画像が読み込まれた後に処理するため、ユーザーに正しくコンテンツを表示できます。

6. onloadとDOMContentLoadedの違いを理解する

6. onloadとDOMContentLoadedの違いを理解する

初心者が混乱しやすいのがDOMContentLoadedとの違いです。DOMContentLoadedはHTMLの構造が読み込まれたタイミングで発火し、画像やCSSの読み込みは待ちません。一方でwindow.onloadはページ全体が読み込まれるのを待ちます。

document.addEventListener("DOMContentLoaded", function() {
  console.log("HTMLの構造は読み込まれました");
});

window.onload = function() {
  console.log("ページ全体が読み込まれました");
};

HTMLだけで早く処理をしたい場合はDOMContentLoaded、全てのリソースが必要な場合はwindow.onloadを選びます。

7. 実践的な使い方の例

7. 実践的な使い方の例

例えば、ページの読み込み完了後にナビゲーションバーをアクティブにしたり、初期アニメーションを開始したい場合はwindow.onloadが便利です。

window.onload = function() {
  const navbar = document.getElementById("navbar");
  navbar.classList.add("active");

  const banner = document.getElementById("banner");
  banner.style.opacity = 1; // アニメーション開始
};

こうすることで、ページ表示中の崩れを防ぎながら、ユーザー体験を向上させることができます。

8. まとめのポイント

8. まとめのポイント

ここまで学んだwindow.onloadの使い方と注意点を整理すると、以下の通りです。

• ページ全体の読み込みが完了したタイミングで処理を実行できる
• 複数登録すると上書きされるので、addEventListenerを使うのが安全
• 画像や外部リソースが多い場合に特に有効
• DOMContentLoadedとは違い、全リソース読み込みを待つ

初心者でも、window.onloadを正しく使えば、ページが完全に表示された後に安全にJavaScript処理を実行できます。

まとめ

まとめ

今回はJavaScriptのwindow.onloadの基本的な使い方から、複数の処理を安全に登録する方法、画像や外部リソースの扱い方まで幅広く学びました。window.onloadはページ全体の読み込みが完了したタイミングで処理を実行できるため、初心者でも安全にDOM操作やスタイル操作、アニメーション開始などが行えます。ただし、複数の処理を同時に登録すると上書きされる可能性があるため、addEventListener("load", ...)を活用することが重要です。また、DOMContentLoadedとの違いを理解することで、処理のタイミングを正しく選べるようになり、ページ表示中の不具合やエラーを防ぐことができます。特に画像ギャラリーやスライドショーなど、全てのリソースが揃った状態で処理したい場合にはwindow.onloadが非常に役立ちます。

サンプルコードまとめ

// 複数処理を安全に登録する例
window.addEventListener("load", function() {
console.log("最初の処理が実行されました");
});

window.addEventListener("load", function() {
const navbar = document.getElementById("navbar");
if (navbar) navbar.classList.add("active");

const banner = document.getElementById("banner");
if (banner) banner.style.opacity = 1;
console.log("ナビバーとバナー処理が完了しました");
});

window.addEventListener("load", function() {
const images = document.querySelectorAll("img");
images.forEach(img => {
console.log(img.src + " が読み込み完了");
});
});