js STUDIO

.onload

windowのloadイベントのためのイベントハンドラです。

(サイト管理者より)
翻訳した時点(2014年12月)では、MDNのページにおいてwindowに紐付けて使用する内容しか記述されていませんでした。 実際には、HTML内に<body onload="…">のように記述する手法や、 他の要素(例えば、img)に対して使用する方法が存在しますので、その事を追記(この枠と同じスタイルで)しておきます。

文法 

window.onload = funcRef;

funcRefには、windowのloadイベントが発生した際に呼び出されるハンドラ関数を指定します。

body要素での指定について (※サイト管理者による追記)

HTML内のbody要素に、次のようにして直接記述する方法もあります。 

<body onload="funcRef();">

stackoverflow.comの「javascript - window.onload vs <body onload=/> - Stack Overflow」という投稿の質問の回答に、 「これは同じイベントを違う方法で使用しているだけであるが、非常に紛らわしいため、主要なJavaScriptライブラリでは上手く隠蔽している」といった内容のものがあります。

また、別の回答では「onloadはページに含まれる全てのリソースの読み込みが終了しないと発火されないため、 画像、スタイルシート、内部のframe要素等の読み込みの完了を待たないDOMContentLoadedを使用するべき」といった内容の回答もあります。

img要素での指定について (※サイト管理者による追記)

onloadはimg要素に対しても需要のある機能です。 例えば何かのイベント(例えばボタンのクリック)によって、画像の読み込みが開始され、 その読み込みが完了したタイミングで処理を実行したいケースでonloadを使用します。

ただし、レースコンデションや、その画像がブラウザキャッシュから取得されるケースも想定し、 注意して使用する必要があります。下記リンク先の記事が参考になります。

その他の要素でのonloadの使用について (※サイト管理者による追記)

他にも、script要素やiframe要素に対しても、非同期で読み込みを行ったあとに処理を実行するのにonloadが使用されています。 MicoroSoftのload | onload event (Internet Explorer)のページによると、 applet、embed要素に対しても使用できるようです。

また、script要素の非同期読み込みについては、 jQueryには専用の$.getScript()が存在します。

古いバージョンのIEへの対策 (※サイト管理者による追記)

古いIEのバージョン(8または9以下だと思われるが未確認)ではonloadがサポートされていないため、 これに対応するためにonreadystatechangeを使用し、 readyStateの状態を確認する方法が用いられています。

例 

window.onload = function() {
  init();
  doSomethingElse();
};

<!doctype html>
<html>
  <head>
    <title>onload test</title>
    <script>
      function load() {
        alert("loadイベントを検知!");
      }
      window.onload = load;
    </script>
  </head>
  <body>
    <p>documentの読み込み(load)が終わると、loadイベントが実行されます!</p>
  </body>
</html>

注意事項

loadイベントは、document読み込み処理の最後に発火します。 この時点で、document内の全てのオブジェクトはDOMとなり、 全ての画像、スクリプト、リンク、サブフレームの読み込みが完了しています。

DOMContentLoadedとDOMFrameContentLoadedのような、 Gecko特有のDOMイベント(EventTarget.addEventListener()を使用して扱うことが出来る)が存在し、 これらはDOMのページ構成後に発火されますが、その他のリソースの読み込みを待ちません。

サイト管理者より
上記に「Gecko特有」のとありますが、DOMContentLoadedは他のブラウザでもサポートされているようです。 また、onloadがwindow、bodyに紐付けて使用するのに対し、documentに対して紐付けて使用します。 サポートされるブラウザとバージョンについては、DOMContentLoadedのページのブラウザ互換性テーブルを参照してください。

また、Internet Explorerの公式ドキュメントにもDOMContentLoadedのページが存在し、IE9以上で対応しているとの事です。

仕様

このイベントハンドラは、HTML内に仕様として明記されいています。

関連項目

(※サイト管理者による追記)

onload関連
DOMContentLoaded関連
readystatechange関連

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。