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

JavaScriptにおけるwindow.onloadとdocument.onloadの違いを徹底解説

JavaScriptでページ読み込み時の処理を実装する際、window.onloadとdocument.onloadはよく比較されるイベントハンドラです。一見似ていますが、発火するタイミングが異なるため、用途に応じて使い分けることが重要です。本記事では、両者の違いと具体的な使用例をわかりやすく解説します。

document.onloadとは

document.onloadは、画像やその他の外部コンテンツが読み込まれる前に発火するイベントです。つまり、HTMLドキュメント自体の解析（パース）が完了した段階で実行されます。そのため、window.onloadよりも先に発火するという特徴があります。

window.onloadとは

window.onloadは、ページ全体の読み込みが完全に完了したタイミングで発火します。これには画像、スクリプト、CSSファイルなど、ページが参照するすべてのリソースの読み込み完了が含まれます。

両者の違いまとめ

イベント発火タイミング
document.onloadHTMLドキュメントの読み込み直後（画像などの外部リソースより前）
window.onload画像・スクリプト・CSSを含むページ全体の読み込み完了後

実装例：window.onloadを使ったアニメーション

以下はwindow.onloadの動作を理解するためのサンプルコードです。ページの読み込みが完了した時点でinit()関数が呼び出され、画像オブジェクトの初期化を行います。

<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
            var imgObj = null;

            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }

            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            window.onload = init;
         //-->
      </script>
   </head>

   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>下のボタンをクリックすると画像が右へ移動します</p>
         <input type="button" value="クリック" onclick="moveRight();" />
      </form>
   </body>
</html>

コードのポイント

  • window.onload = init;により、ページ全体（画像を含む）の読み込み完了後にinit()が実行されます。
  • init()内ではgetElementByIdで画像要素を取得し、位置情報を初期化しています。
  • ボタンをクリックするとmoveRight()が呼ばれ、画像が10pxずつ右へ移動します。

使い分けの目安

DOM要素へのアクセスだけで十分な場合はdocument.onload（または現代的にはDOMContentLoadedイベント）を使用し、画像サイズの取得などすべてのリソースが必要な場合はwindow.onloadを選ぶのが基本です。特にモダンな開発では、柔軟性の高いaddEventListener('DOMContentLoaded', ...)やaddEventListener('load', ...)の利用が推奨されています。

  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方