back
イベント関連の機能 (1/6)
■ロード完了時のイベント処理
イベント処理と一口にいってもさまざまなものがあります。中でも多用されるものとしては「onload」イベントがあげられるでしょう。<body>タグに記述するもので、ボディのロードが完了した際のイベント処理を行うものでした。
このonloadのように、「準備が完了したとき」の処理を行うものというのは、意外と必要性が高いものです。jQueryにも同様の機能があります。それはjQueryオブジェクトに用意されている「ready」というメソッドです。これは、
このreadyの面白いところは、ドキュメントがロード完了したときではなく、「そのjQueryオブジェクトで扱っているDOMオブジェクトが利用可能となったとき」に呼び出される、という点です。
Webブラウザでは、Webページを読み込むとき、HTMLのソースコードをロードした後、「DOMツリー」と呼ばれるものを構築していきます。これは、それぞれの要素を示すエレメント（DOMオブジェクト）を生成し、それをドキュメント構造にしたがって構造的に組み込んでいく処理です。このDOMツリーの構築が完了して、初めてDOMオブジェクトは利用可能となります。
jQueryのreadyは、このDOMツリーの構築が完了し、DOMオブジェクトが利用可能となったタイミングで呼び出されます。このタイミングはWebブラウザによって微妙に異なります。例えば、ロードに時間のかかる要素（例えば巨大イメージとか）が組み込まれているページなどだと、それらすべての読み込みが完了しないとonloadイベントは発生しません。このため、onloadで処理をしようとすると、ページのロードが完了するまでイライラと待たされる事になります。
jQueryのreadyを使えば、DOMツリーの構築が完了し、DOMオブジェクトが利用可能になった時点で、（まだロード中の巨大イメージなどがあっても）実行しますから、それだけ初期化を早く行うことができます。
簡単な利用例を下に掲載しておきましょう。ここでは、$(document).readyというようにして、documentのjQueryオブジェクトのreadyを呼び出しています。これで、ドキュメントのDOMオブジェクトが使えるようになったら処理が実行されるようになります。
このonloadのように、「準備が完了したとき」の処理を行うものというのは、意外と必要性が高いものです。jQueryにも同様の機能があります。それはjQueryオブジェクトに用意されている「ready」というメソッドです。これは、
《jQuery》.ready( 関数リテラル );このように、引数に関数リテラルを指定します。これにより、そのDOMオブジェクトが利用可能になったら、指定した関数リテラルの処理を呼び出し実行します。
このreadyの面白いところは、ドキュメントがロード完了したときではなく、「そのjQueryオブジェクトで扱っているDOMオブジェクトが利用可能となったとき」に呼び出される、という点です。
Webブラウザでは、Webページを読み込むとき、HTMLのソースコードをロードした後、「DOMツリー」と呼ばれるものを構築していきます。これは、それぞれの要素を示すエレメント（DOMオブジェクト）を生成し、それをドキュメント構造にしたがって構造的に組み込んでいく処理です。このDOMツリーの構築が完了して、初めてDOMオブジェクトは利用可能となります。
jQueryのreadyは、このDOMツリーの構築が完了し、DOMオブジェクトが利用可能となったタイミングで呼び出されます。このタイミングはWebブラウザによって微妙に異なります。例えば、ロードに時間のかかる要素（例えば巨大イメージとか）が組み込まれているページなどだと、それらすべての読み込みが完了しないとonloadイベントは発生しません。このため、onloadで処理をしようとすると、ページのロードが完了するまでイライラと待たされる事になります。
jQueryのreadyを使えば、DOMツリーの構築が完了し、DOMオブジェクトが利用可能になった時点で、（まだロード中の巨大イメージなどがあっても）実行しますから、それだけ初期化を早く行うことができます。
※利用例
簡単な利用例を下に掲載しておきましょう。ここでは、$(document).readyというようにして、documentのjQueryオブジェクトのreadyを呼び出しています。これで、ドキュメントのDOMオブジェクトが使えるようになったら処理が実行されるようになります。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#message').text('ロード完了！');
});
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message">※ロード中……</div>
</body>
</html>
| 次へ >> |