jQueryでの落とし穴

ちょっとはまったのでポスト。

jQueryのプラグインを使う際に気をつけなきゃいけないことなんですが、jQuery(function(){});でdocument読み込み完了後に処理させるようにするのはもちろんなんですが、プラグインによってはうまくCSSが当たらない等があります。

これはjQueryプラグインを読み込んだ後にCSSをあてがうと起こります。

例えば「jquery.bar.js」とかいうプラグインがあるものとして例を挙げてみます。

例えば以下のような場合。

<script type="text/javascript" src="js/jquery-1.3.2-min.js"></script>
<script type="text/javascript" src="js/foo/jquery.bar.js"></script>
<link href="/css/bar.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text.javascript">
    jQuery(function(){
        jQuery("#id").bar() ;
    });
</script>

これはユーザーからみれば、ドキュメント読み込んでからCSS当たるんだもんね！って解釈になっているので本来なら「css読み込む→js読み込む→js実行される」と動いて欲しいところですが、これだと上から順番に実行されるのでうまくCSSが当たらない場合があります。

もし正しく動作させるならば、先ほどの読み込み順序は以下のようにならなければなりません。

<link href="/css/bar.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2-min.js"></script>
<script type="text/javascript" src="js/foo/jquery.bar.js"></script>
<script type="text/javascript">
    jQuery(function(){
        jQuery("#id").bar() ;
    }) ;
</script>

理由はとっても簡単。

上から順に実行されるから。

でも上から順に実行されるからって理由だけじゃ満足されない方もいるかもしれないので、もう少し詳しく。

プラグイン内部では、たいがい「each」という関数が使われています。

その中で、抽出されたHTML要素に対してCSSを当てたり、クリックされたら動いてね！等の関数をあてがうことが出来ます。

このせいで後からCSSを読み込ませたりすると、CSSでの表示崩れが起こる場合があると言うことなのです。

なので、jQueryプラグインを使う際はCSSとJSの読み込み順序に気をつけましょう。＆前に戻りまくる事も大切。というお話でした。

といっても、配布サイトに書いてあったりもするんですが・・・。