onload - 読み込み完了時に発火する

投稿日:

JavaScriptの、イベントハンドラのonloadは、読み込みの完了時に発火して処理を実行します。

説明

イベントハンドラのonloadは読み込みの完了時に発火します。windowオブジェクトのイベントに設定した場合は、ドキュメントツリーの解析と、画像など全てのサブリソースの読み込みが完了したタイミングで発火します。

img要素、iframe要素などのイベントに設定した場合、src属性に指定したリソースの読み込みが完了した時に発火します。

また、FileReaderオブジェクトにも設定することができます。この場合、例えばreadAsDataURL()などで読み込みを実行し、完了したタイミングで発火します。

サンプルコード

// 処理を定義
var action = function() {
	// 処理内容
}

// イベントを設定 ( addEventListener )
window.addEventListener( "load", action ) ;

// イベントを削除
window.removeEventListener( "load", action ) ;
// イベントを設定 ( onload )
window.onload = function() {
	// 処理内容
}

// イベントを削除
window.onload = null ;

デモ

img要素にonloadイベントを設定しました。変更ボタンを押すと画像を変更します。イベントが発生するごとに、発生回数がカウントアップされます。

関連項目

外部リンク