HTMLElement: load イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

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

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

構文

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

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

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

JavaScript

const image = document.getElementById("image"); image.onload = () => { document.body.appendChild(document.createElement("div")).textContent = "loaded!"; }; function reload() { image.src = "/shared-assets/images/examples/favicon144.png"; }