onload イベントについて
onload イベントは、ページやエレメントの読み込みや画像といったリソースファイルの読み込み使用します。
このイベントは、HTML テキストの DOM への変換が終了されると(ロードされるという解説が多い)、またはダウンロードプロセスが終了すると発生します。
ページやエレメントのロード
ページの読み込みで使用する場合は、window や <body> エレメントに設定します。window はドキュメントの全てのコンテンツがロードし終わると onload イベントが発生します。
body.onload
body.onload = function( event ){
console.log( event );
};
詳しくはExample
を参照してください。
Window では、web ページが読み込まれたら実行されるので、初期設定に利用することができます。ほとんどの場合はこちらを利用します。
window.onload
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が担っています。
Example
エレメント、動画、XMLHttpRequest、FileReaderのダウンロードプロセスにおいて loadstart、load、loadeddata、loadend イベントの機能を確認できます。
エレメントでの例
エレメントでのダウンロードプロセスにおいて loadstart、load、loadeddata、loadend イベントの機能を確認できます。
event 詳細は開発用コンソールで確認してください。
エレメントでは、load イベントだけが機能するようです。
動画での例
動画の読み込みにおいて loadstart、load、loadeddata、loadend イベントを機能を確認できます。
動画では、loadstart、progress、loadeddata イベントが機能します。
XMLHttpRequest での例
XMLHttpRequest での例です。src/test.html ファイルを読み込んでページの遷移をしないで内容を追加表示します。
XMLHttpRequest では、loadstart、progress、load、loadend イベントが機能します。
FileReader での例
FileReader での例です。
FileReader では、loadstart、progress、load、loadend イベントが機能します。