HTMLElement: load イベント

load イベントは、リソースを含む要素において、そのリソースが完全に読み込まれたときに発行されます。今のところ、対応している HTML 要素は、<body>、<embed>、<iframe>、<img>、<link>、<object>、<script>、<style>、<track> です。

メモ: 実際には load イベントは、HTMLBodyElement においては、 window.onload イベントの別名です。従って、load イベントは <body> 要素においては、その文書のすべてのリソースが読み込まれたかエラーになったときに、一度だけ発生します。しかし、わかりやすくするために、イベントハンドラーは HTMLBodyElement ではなく、window オブジェクトに直接取り付けることが推奨されます。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
elt.addEventListener("load", (event) => { ... });
// または
elt.onload = (event) => { ... };

イベント型

一般的な Event です。

例

この例では、<img> 要素がリソースの読み込みに成功するたびに画面へ出力されます。

HTML

html
<img id="image" src="favicon144.png" alt="MDN logo" width="72" />
<div><button onclick="reload()">Reload</button></div>

JavaScript

js
const image = document.getElementById("image");
image.onload = () => {
  document.body.appendChild(document.createElement("div")).textContent =
    "loaded!";
};

function reload() {
  image.src = "favicon144.png";
}

結果

仕様書

No specification found

No specification data found for api.HTMLElement.load_event.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 関連イベント:

    • Window: load イベント
    • Window: error イベント