DOM 読み込み完了時に関数を実行する domready.js
配布元:METAREAL
ライセンス:MIT-style license.
domready.jsはDOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリになります。
ページの読み込みが終了したイベントを取得するonloadイベントは厳格すぎて少々扱いにくいところがあります。
画像などのすべてのファイルの読み込みを終了してから実行するため、ラグが生じてしまうからである。
この domready.jsを利用すれば、DOM ツリーが構築されたタイミングで、任意の関数を実行できるのでラグが最小限ですむ。
同様の機能をjQueryやmootoolsではサポートしており、Prototyp.jsの最新版も新たにサポートされています。
参考:Prototype 1.6.0 で大きく進化したイベント API
domready.jsを利用すれば、それらのフレームワークに依存せずに利用できるのでよいですね。
今回は配布元が日本語サイトということもあり、使い方の説明はそちらを参考にしてもらったらよいのですが、当サイトでは、配布サイトが閉鎖した場合も考えて、使い方とサンプルの掲載を行っています。
(ライセンス的に問題ないと考えておりますが、問題ある場合ご連絡ください)
設置方法
まず、domready.js を読み込みます。
<script type="text/javascript" src="/javascripts/domready.js"></script>
prototype.js と併用する場合は prototype.js より後に読み込みます。
<script type="text/javascript" src="/javascripts/prototype.js"></script>
<script type="text/javascript" src="/javascripts/domready.js"></script>
実行に関しては、以下のようなJavaScriptを記述するだけ
Event.domReady.add(function() {
...
});
プログラマーの方には結構気に入られるライブラリだと思います。
関連エントリー
prototype.jsを使ってみる 2-Event.observe
javascriptを読み込みと同時に実行する方法
window.onloadについて
Re:href="#" onclick の悪習
JavaScript Library Archiveオープンのお知らせ
スポンサードリンク
«[再掲]Ajaxで実現!リッチなWebサイトのつくりかた-実践・Adobe Spry framework for Ajax- | メイン | footerをウィンドウ下部に固定する『footerFixed.js』»
- このエントリーのトラックバックURL
- http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/100
IE7でサンプル見ると
onloadが先に来ています。orz
>匿名さん
あら、ほんとですね。配布元も死んでしまってるようですのでprototype.jsなど他のライブラリを利用されるのが良いかもしれません。