1. ウェブ
  2. Web API
  3. HTMLElement
  4. load

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTMLElement: load イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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="/shared-assets/images/examples/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 = "/shared-assets/images/examples/favicon144.png";
}

結果

仕様書

仕様書
UI Events
# event-type-load
HTML
# handler-onload
HTML
# event-load

ブラウザーの互換性

関連情報

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

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告