Kawanet Blog II

アクセスカウンタ

zoom RSS [jQuery] $(function)はonload後には効かない

<<   作成日時 : 2008/01/31 04:47   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 15 / トラックバック 2 / コメント 0

JSライブラリで、DOM構築完了後に実行したい初期化コードがありまして、
$(function) みたいに最速タイミングで実行できる仕組みを探しております

・・・・

jQuery の $() の引数に初期化処理を行う関数とかの function を入れると、
  ・onLoad のタイミングで呼び出してくれる
  ・複数の初期化関数があっても、順に安全に実行できる
  ・$() だけなので、コード(文字数)が短くなる
だけでなくて、
  ・(ほとんどのブラウザで)実際に onLoad のイベントが発生するよりも
    先に関数を実行してくれるアクセラレーション機能が入っている
のもまた jQuery がクールと言われるポイントの1つ。
<script>
function init () {
     alert( "Hello, jQuery!" );
}
$( init );
</script>
という話は、去年の「まるごとJavaScript&Ajax!」などで書いた。

ところが、その $(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>
function init () {
     alert( "Hello, jQuery!" );
}
function start () {
     $( init );
}
setTimeout( start, 1 );
</script>
C の状態でもスルーさせずに初期化関数を実行させる回避策はないかな。。。
予め $(function(){}); のダミー関数でも実行しておけば良いのだけど、意味ないか。
 


(追記)
amachangさん によると、
jQuery.event.special.ready.setup()
で行けるらしい。
ただし、Chrisさん によると、
たしかjQuery1.2.2から実装されたイベントAPIの一種なので、それ以前のバージョンのjQueryでは使えないので使うときはバージョンを要チェックです(ちがってたらゴメンナサイ)。
とのこと。
Thank you both!

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 15
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い 面白い
ガッツ(がんばれ!) ガッツ(がんばれ!)
驚いた
ナイス
かわいい

トラックバック(2件)

タイトル (本文) ブログ名/日時
[javascript] jQuery の $(function) が ready イベント発生後だ...
ready にまつわる「ややこしい問題」で 川崎さんが困っているようなので &#91;jQuery&#93; $(function)はonload後には効かない Kawa.netブログ(川崎有亮)/ウェブリブログ 実は (たぶん)その「ややこしい問題」のために用意されている関数が jQuery にはある jQuery.even ...続きを見る
IT戦記
2008/01/31 13:22
jQueryの$(function)がwindow.onload後に効かない問題
病み上がり職場復帰のリハビリ代わりに、下記jQueryの$(function)の... ...続きを見る
でぃべろっぱーず・さいど
2008/01/31 23:32

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
[jQuery] $(function)はonload後には効かない Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる