--- title: GlobalEventHandlers.onload slug: Web/API/GlobalEventHandlers/onload tags: - API - Event Handler - GlobalEventHandlers - HTML DOM - Property - Reference - onload browser-compat: api.GlobalEventHandlers.onload translation_of: Web/API/GlobalEventHandlers/onload ---
{{ApiRef()}}

onload は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{domxref("Window")}}、{{domxref("XMLHttpRequest")}}、{{htmlelement("img")}} 要素などで発生した {{event("load")}} イベントを処理するイベントハンドラーです。

load イベントは指定されたリソースの読み込みが完了したときに発行されます。

構文

target.onload = functionRef;

値

functionRef は、ウィンドウの load イベントが発行されたときに呼び出されるハンドラー関数です。

例

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

<!doctype html>
<html>
  <head>
    <title>onload test</title>
    // ES5
    <script>
      function load() {
        console.log("load イベントが検出されました。");
      }
      window.onload = load;
    </script>
    // ES2015
    <script>
      const load = () => {
        console.log("load イベントが検出されました。");
      }
      window.onload = load;
    </script>
  </head>
  <body>
    <p>load イベントは、文書の読み込みが完了したときに発行されます。</p>
  </body>
</html>

メモ

load イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。

DOMContentLoaded や DOMFrameContentLoaded のような DOM イベント ({{domxref("EventTarget.addEventListener()")}} で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報