カテゴリー
オライリーJavaScript

ドキュメントのloadイベント

多くのWebアプリケーションでは、ドキュメmンとがロードされ、操作できるようになったことを、 ブラウザから通知してもらわないとならない。 Windowオブジェクトのloadイベントがこの目的にために用意されている ドキュメントや画像がすべて読み込まれると、loadイベントが発生する。

onload:ドキュメントが読み込まれたときに関数を呼び出す

// ドキュメントの読み込みが完了したときに実行する関数fを登録する
// ドキュメントが読み込み済みの場合は、できるだけ早く非同期で呼び出す
function onLoad(f) {
	if(onLoad.loaded) 		//ドキュメントが読み込み済みであれば、
		window.setTimeout(f, 0); 	//できるだけ早く f が実行されるようにする
	else if (window.addEventListener) 	//イベント登録用の標準メソッド
		window.addEventListener("load", f, false);
	else if (window.attachEvent) 			//IE8以前ではこのメソッドを使う
		window.attachEvent("onload", f);
}

// ドキュメントの読み込みが終わっていないことを示すフラグを設定する。
onLoad.loaded = false;
// そして、ドキュメントが読み込まれたときにフラグを設定する関数を登録する。
onLoad(function(){ onLoad.loaded = true; });


ドキュメントが読み込まれ、解釈され、遅延実行指定されたスクリプトの実行が完了したら、 DOMContentLoadedイベントが発生する。 ドキュメントのロードにつれて、document.readyStateプロパティが変化する

以下の例で、whenReady()関数を定義する。

/*
*whenReady()に関数を引数で渡す
*ドキュメントが解釈され操作可能になったときに、
*この関数がドキュメントのメソッドとして呼び出される
*登録した関数は、
*DOMContentLoaded、readyStatechange、loadイベントが発生したときに呼び出される
*ドキュメントが準備でき、すべての関数が呼び出されていたら、
*whenReady()に渡された関数がすぐに呼び出される
*/
var whenReady = (function() {	//この関数はwhenReady()関数を返す
	var funcs = [];	//イベントが発生したときに実行する関数
	var ready = false;	//イベントハンドラが呼び出されたときにtrueに変更する

	//ドキュメントの準備ができたときに呼び出されるイベントハンドラ
	function handler(e) {
		//一度実行していれば、すぐに戻る
		if(ready) return;

		//readystatechangeイベントの場合で、状態が「complete」以外の状態に
		//変わった場合は、まだ準備ができていない
		if(e.type === "readystatechange" && document.readyState !== "complete")
			return;

		//登録された関数をすべて実行する
		//毎回funcs.lengthを調べていることに注意
		//ある関数を呼び出したときに、されに別の関数が登録されている場合を考慮している
		for (var i = 0; i < funcs.length; i++) {
			funcs[i].call(document);
		}

		//ここで、readyフラグをtrueに設定し、関数を忘れる
		ready = true;
		funcs = null;
	}

	//受信したいイベント用にハンドラを登録する
	if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", handler, false);
		document.addEventListener("readystatechange", handler, false);
		window.addEventListener("load", handler, false);
	} else if(document.attachEvent) {
		document.attachEvent("onreadystatechange", handler);
		window.attachEvent("onload", handler);
	}

	//whenReady関数を返す
	return function whenReady(f) {
		if (ready) f.call(document);	//すでに準備ができていたら、実行するだけ
		else funcs.push(f);	//まだ準備できていない場合は、キューに入れる
	}
}())

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です