デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

holdReady( )readyイベントの保留/解除

構文

readyイベントを保留/解除する返値:なし
jQuery.holdReady(true/false)ver1.6〜

機能

readyイベントの実行を保留したり解除するメソッドです。
必要なデータの読込が完了するまでreadyイベントを実行したくない場合などに利用します。引数にtrueを設定するとreadyイベントの実行を保留します。falseを設定すると保留していたreadyイベントを実行します。

解説

readyイベントを保留

サンプル(holdready/01.html)を開くとreadyイベント内の処理が実行されてアラートが表示されます。

jQuery(document).ready(function () {	
	alert("ready!");
});

続いてサンプル(holdready/02.html)を開いてソースを確認して下さい。readyイベント内にalertが有るにもかかわらずアラートが表示されません。これは以下の様にholdReadyメソッドにtrueを設定したためreadyイベントが保留されているためです。

$.holdReady(true);
jQuery(document).ready(function () {
	alert("ready!");
});

保留されているだけなので、引数にfalseを設定したholdReadyメソッドを実行すればreadyイベントを実行できます。サンプル(holdready/03.html)を開いてbody内にbuttonが追加されていることを確認して下さい。buttonをクリックするとjavaScriptのreadyFuncを実行するようにしてあります。

readyFuncでは以下の様に、holdReadyメソッドの引数にfalseを設定して実行するためbuttonをクリックすると保留されていたreadyイベントが実行され、アラートが表示されます。

function readyFunc() {
	$.holdReady(false);
}

buttonをクリックする処理は以下の様にhtml上に記述してあります。

<button onClick="readyFunc()">button</button>

jQuery(function)の構文にも利用できます

jQuery(function)でもreadyイベントと同じ事ができますが、holdReadyメソッドはjQuery(function)に対しても利用できます。サンプル(holdready/04.html)を開いて、ほとんどholdready/03.htmlと同じ事を確認してください。

異なるのは以下の様に、readyイベントではなくjQuery(function)を利用している点だけです。

jQuery(function () {
	alert("ready!");
});

結果としてholdready/03.htmlと同じように、buttonがクリックされるまでアラートが表示されません。

メモ

本家のサンプル

これは外部jsなどの読込が完了してから、readyイベントを実行したい場合に利用します。以下のソースは本家ページのサンプルで、myplugin.jsの読込が完了してからreadyイベントを実行するようにしている例です。

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});