load ( onload )イベント
load ( onload )イベントは、リソースファイルやタグエレメントが読み込まれたら発生するイベントです。
このイベントは、ページやエレメントオブジェクトの読み込みや、画像といったリソースファイルのダウンロードプロセスにも使用します。また、FileReader や XMLHttpRequest においても使用できます。
<audio>、<video> といった音声や動画では機能しないようです。以下の動画での例
を参照してください。
window.onload = function( event ){
console.log( event );
};
load ( onload )イベントは web ページの初期化やエレメントの読み込み確認などに利用されています。詳しくは以下のonload イベントについて
を参照してください。
ページ内 Index
onload イベントについて
onload イベントは、ページやエレメントの読み込みや画像といったリソースファイルの読み込み使用します。
このイベントは、HTML テキストの DOM への変換が終了されると（ロードされるという解説が多い）、またはダウンロードプロセスが終了すると発生します。
ページやエレメントのロード
ページの読み込みで使用する場合は、window や <body> エレメントに設定します。window はドキュメントの全てのコンテンツがロードし終わると onload イベントが発生します。
body.onload = function( event ){
console.log( event );
};
詳しくはExample
を参照してください。
Window では、web ページが読み込まれたら実行されるので、初期設定に利用することができます。ほとんどの場合はこちらを利用します。
window.onload = function(){
};
onload イベントを使用して訪問者のブラウザとそのバージョン情報を取得し適切な web ページをロードすることができます。
onload イベントのタイミングは、Cookie の処理に使用できます。
ページの読み込みに関しては対としてunload ( onunload )イベントがあります。
似た機能にonpageshow イベントがあります。onload イベントはキャッシュを使わないロードのみが実行されます。キャッシュからドキュメントをロードするとonloadイベントは発生しません。
pageshowイベントに比べて、適応されるエレメントに違いがあります。 loadイベントは Window、Document、各エレメントで使うことができますが、pageshowイベントは Window 、body オブジェクトで使います。
構文（Syntax）
load ( onload )イベントを定義する方法には以下があります。
in HTML
<tagelement onload ="function(); ...;">
in JavaScript
object.onload = function(){... };
addEventListener()
関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。
object.addEventListener("load ", function_name);
スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。
object.addEventListener("load ", ()=>{ ... },false);
// または
object.addEventListener("load ",function(){ ... },false);
イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。
備考（Remarks）
| Bubbles | No |
| Cancelable | No |
| Interface | UiEvent（ユーザーインターフェイスから生成された場合）,Event |
| Supported HTML Elements | 全般 |
GlobalEventHandlersミックスインで定義されおり、HTMLElement, Document, Windowインターフェイスで利用できます。
Example
エレメント、動画、XMLHttpRequest、FileReaderのダウンロードプロセスにおいて loadstart、load、loadeddata、loadend イベントの機能を確認できます。
エレメントでの例
エレメントでのダウンロードプロセスにおいて loadstart、load、loadeddata、loadend イベントの機能を確認できます。
event 詳細は開発用コンソールで確認してください。
エレメントでは、load イベントだけが機能するようです。
動画での例
動画の読み込みにおいて loadstart、load、loadeddata、loadend イベントが機能するかの確認です。
動画では、loadstart、progress、loadeddata イベントが機能します。load イベントはこの方法ではないようです。
XMLHttpRequest での例
XMLHttpRequest での例です。XMLHttpRequest は AJAX と呼ばれ、ページ全体の遷移をしないで src/test.html ファイルを読み込んで内容を追加表示します。
XMLHttpRequest では、loadstart、progress、load、loadend イベントが機能します。
FileReader での例
FileReader での例です。
FileReader では、loadstart、progress、load、loadend イベントが機能します。
関連するイベント
読み込みに使用するイベントです。エレメントのロード、ファイルのダウンロード、動画や音声といったメディデータのダウンロードと用途によって機能する／しないイベントがあります。
| イベント | 概要 |
|---|---|
| onabort | 読み込みが途中でキャンセルされたら |
| onerror | リソースの読み込みの失敗または実行時にエラーが発生したら |
| onload | ファイルやエレメントのロード時に発生。window でページの初期設定に使用 |
| onloadeddata | メディアデータの読み込みが終了したら |
| onloadedmetadata | メディアのメタデータの読み込みが完了したら |
| onloadend | ファイルの読み込みが終了したら |
| onloadstart | ファイルやメディアデータダウンロードプロセスが始まったら |
| onprogress | ファイルやメディアデータをダウンロードをしている間 |
| onstalled | ダウンロードをしたデータが利用できない |
ページの遷移に関するイベント
HTML テキストのロード、ページの表示、閉じる、移動するといったページの遷移に関するイベントです。load イベントはページの読み込みとしても使用されます。