[jQuery] $(function)はonload後には効かない
JSライブラリで、DOM構築完了後に実行したい初期化コードがありまして、
$(function) みたいに最速タイミングで実行できる仕組みを探しております
・・・・
jQuery の $() の引数に初期化処理を行う関数とかの function を入れると、
・onLoad のタイミングで呼び出してくれる
・複数の初期化関数があっても、順に安全に実行できる
・$() だけなので、コード(文字数)が短くなる
だけでなくて、
・(ほとんどのブラウザで)実際に onLoad のイベントが発生するよりも
先に関数を実行してくれるアクセラレーション機能が入っている
のもまた jQuery がクールと言われるポイントの1つ。
ところが、その $(function) での関数呼び出しは、DOM 構築完了前
(実際に onload のイベントが発生する前)でないと効かないんだね。
(A) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出す
→onLoad 相当のタイミングで実行される
(B) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出した後、
DOM 構築後に改めて $(function) を呼び出す
→後者は即時に実行される
(C) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出さないまま
DOM 構築後に初めて $(function) を呼び出す
→スルーされる
C では、jQuery が DOM 構築完了したか否かを感知していないので、
イベント待ち状態となり、function が実行されない。(少なくとも Firefox では)
そもそも、$(function) 機能の目的は『Shortcut for document ready』であって、
初期化関数実行用ではないので、設計通りとも言える。(じゃあBは?)
具体的には、DOM 構築完了後に、script 要素を DOM ツリーに追加して、
そのソース中で $(function) した場合とかに、C の状態が発生する。
または、DOM 操作でなくても、確認用としては、以下のコードで再現可能。
予め $(function(){}); のダミー関数でも実行しておけば良いのだけど、意味ないか。
(追記)
amachangさん によると、
ただし、Chrisさん によると、
Thank you both!
$(function) みたいに最速タイミングで実行できる仕組みを探しております
・・・・
jQuery の $() の引数に初期化処理を行う関数とかの function を入れると、
・onLoad のタイミングで呼び出してくれる
・複数の初期化関数があっても、順に安全に実行できる
・$() だけなので、コード(文字数)が短くなる
だけでなくて、
・(ほとんどのブラウザで)実際に onLoad のイベントが発生するよりも
先に関数を実行してくれるアクセラレーション機能が入っている
のもまた jQuery がクールと言われるポイントの1つ。
<script>という話は、去年の「まるごとJavaScript&Ajax!」などで書いた。
function init () {
alert( "Hello, jQuery!" );
}
$( init );
</script>
ところが、その $(function) での関数呼び出しは、DOM 構築完了前
(実際に onload のイベントが発生する前)でないと効かないんだね。
(A) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出す
→onLoad 相当のタイミングで実行される
(B) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出した後、
DOM 構築後に改めて $(function) を呼び出す
→後者は即時に実行される
(C) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出さないまま
DOM 構築後に初めて $(function) を呼び出す
→スルーされる
C では、jQuery が DOM 構築完了したか否かを感知していないので、
イベント待ち状態となり、function が実行されない。(少なくとも Firefox では)
そもそも、$(function) 機能の目的は『Shortcut for document ready』であって、
初期化関数実行用ではないので、設計通りとも言える。(じゃあBは?)
具体的には、DOM 構築完了後に、script 要素を DOM ツリーに追加して、
そのソース中で $(function) した場合とかに、C の状態が発生する。
または、DOM 操作でなくても、確認用としては、以下のコードで再現可能。
<script>C の状態でもスルーさせずに初期化関数を実行させる回避策はないかな。。。
function init () {
alert( "Hello, jQuery!" );
}
function start () {
$( init );
}
setTimeout( start, 1 );
</script>
予め $(function(){}); のダミー関数でも実行しておけば良いのだけど、意味ないか。
(追記)
amachangさん によると、
jQuery.event.special.ready.setup()で行けるらしい。
ただし、Chrisさん によると、
たしかjQuery1.2.2から実装されたイベントAPIの一種なので、それ以前のバージョンのjQueryでは使えないので使うときはバージョンを要チェックです(ちがってたらゴメンナサイ)。とのこと。
Thank you both!
この記事へのコメント