DOM 読み込み完了時に関数を実行する domready.js

このエントリーをはてなブックマークに追加

配布元:METAREAL[閉鎖]
ライセンス:MIT-style license.

domready.jsはDOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリになります。

ページの読み込みが終了したイベントを取得するonloadイベントは厳格すぎて少々扱いにくいところがあります。

画像などのすべてのファイルの読み込みを終了してから実行するため、ラグが生じてしまうからである。

この domready.jsを利用すれば、DOM ツリーが構築されたタイミングで、任意の関数を実行できるのでラグが最小限ですむ。

同様の機能をjQueryやmootoolsではサポートしており、Prototyp.jsの最新版も新たにサポートされています。


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/1174
コメント

IE7でサンプル見ると
onloadが先に来ています。orz

投稿者:匿名 | 2009年6月25日 15:50

>匿名さん

あら、ほんとですね。配布元も死んでしまってるようですのでprototype.jsなど他のライブラリを利用されるのが良いかもしれません。

投稿者:西畑一馬 | 2009年6月25日 20:43
コメントを投稿