2011-07-27 3 views
3

これはヘッダーではなく本体のJavaScriptファイルをリンクすると問題が発生しますか?

<script type="text/javascript" src="resources/application.js"></script> 
    <script type="text/javascript" > 
     $(document).ready(createHeader()); 
     $(document).ready(scriptSet()); 
    </script> 

ID 2を分離することを避けるために好きで、一般的ながら、私はdocument.ready関数があっ置くときに動作するように見えるいけない唯一のヘッダ内のスクリプトのリンクを参照してくださいをしようと何イムです。しかし、身体の終わりに置いたときにすべてが完全にうまくいくように見えるので、これは何か問題を引き起こすか、これは問題ありませんか?

+0

あなたがそれらのスクリプト_before_ jQueryライブラリの参照を持っていますか?また、一つのファイルに複数の '$(document).ready()'は必要ありません。 –

+1

ready()コールで匿名関数を使用しないのはなぜですか? –

+0

私はしばしば、本体に直接リンクされたヘッダとページ固有のスクリプトにlibrairies(jQuery、plugins、...)を持っています。私の経験では、それはそのようにうまく動作します。 –

答えて

8

、それはjQueryのファイルは、それがheadbodyでいた場合、それはない問題を行い含ん後来る$(document).ready(function(){ });$(document).readyは、スクリプトが実行される前にDOMが完全にロードされるようにします。スクリプトのすべてを置くこともつとも

は、含まれており、bodyの下部にあるスクリプトは、ロード・パフォーマンスのために最高です。

This article explains it nicely.

例:

 <body> 

    <!-- MY HTML CODE --> 

    <!-- START javascript --> 
     <script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script> 
     <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script> 
     <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script> 
     <script type="text/javascript" src="/javascript/some_other_scripts.js"></script> 

     <script type="text/javascript" language="JavaScript"> 
     //<![CDATA[ 
      $(document).ready(function(){ 
       // my code 
      }); 
     //]]> 
     </script> 
    <!-- END javascript --> 

     </body> 
+0

厳密に言えば、 '$ .ready()'はjQueryスクリプトのダウンロード後に実行する必要があります。これはパフォーマンスの要因です。すべてのスクリプト(非インクルード)を一番下に置くのはちょっと過激です(Yahooのホームページでもそうしませんが、ほとんどの場合そうします)。しかし、サイトにたくさんの画像やコンテンツがある場合(SOのような)非常に高いトラフィックサイトである場合、スクリプトにはおそらく下部に行く必要があります(そしてそれらを必要とするスクリプトは機能するために含まれています)。 –

+0

@Jared:はい、 'ready'はjQueryの後に続きます。私は例を掲示すべきだった。 – Sparky

+0

@ Sparkyあなたがリンクしている記事は優れており、パフォーマンスシリーズ全体がウェブサイトを構築している人にとっては必読です。ポインタありがとう! – russellmania

0

本文にスクリプトタグを置いても問題ありません。ページはトップダウンで解析されるので、スクリプトを使用する前に組み込む必要があります。

0

Nopは、実際にはHTMLの最後にスクリプトを配置する「パフォーマンス」があります。

まだ良い例は、別のファイルにすべてのjavascriptを置き、ファイルを圧縮しても可能ならばそれを呼び出すヘッダーを設定することです。

さて、私はあなたが$(文書)を呼び出すいけないこの

$(document).ready(function(){ 
    createHeader(); 
    scriptSet(); 
}); 

ためにそのコードを変更しますが二回:)

+0

'.ready()'呼び出しをページの最後に置くことがなぜ重要か、 '.ready()'呼び出しで無名関数が欠落している理由は分かりません。 –

+0

私が話しているパフォーマンスは、準備ができているからではありません。あなたのHTMLの終わりにJavaScriptを設定すると、ページはJavaScriptの最後に解析されるので、実際にはパフォーマンスの向上ではなく、「速く読み込まれた」ように見えます。 Btw私は匿名関数を追加しました:) – Hassek

0

あなたは$(document).ready()の内側に入れている機能ではないことを実現します.ready DOMContentLoadedが発砲するのを待つつもりですか?コードに表示されたときに即座に呼び出されるのを避けるために、それらを関数呼び出し(イベントハンドラ)内にラップする必要があります。匿名関数は通常正常です。

$(document).ready(function(){ 
    createHeader(); 
    scriptSet(); 
}); 
0

私はいくつかのWebアプリケーションを展開しており、bodyタグにあるスクリプトに問題はありませんでした。私は、ページの可視要素のダウンロードの進行を妨げないように、ページの最後に配置するのが好きです。私は、Googleがスクリプトのいくつか(多分Analyticsか?

他の人が言っているように、$(document).ready();の前にjQueryリファレンスがあることを確認してください。コール。それは過去をスリップするのは簡単だし、トラブルシューティングが困難:)

JMAX

0

あなたのスクリプトが含まれており、あなたのBODY要素内のブロック置けば、それは一般的に問題ではありません。彼らはほとんどの場合完璧に動作します。一部の人々はそれを悪い習慣と信じていますが、間違った習慣ではありません。それはいつも起こります。

しかし、$.ready()関数呼び出しをどこに置いても問題ありませんが、jQueryインクルードの後であれば、いつでもDOMが準備完了した後に実行されるため、AFTERページの読み込み)。だから、この場合は何の違いもありません。

関数呼び出しの匿名関数に注意してください。これにより、匿名関数の参照が$.ready()に渡されます。これにより、関数本体が後で実行されるため、後で関数が呼び出されます。あなたが内部のコードを囲む限り

機能的
<script type="text/javascript"> 
$(document).ready(function(){ 
    createHeader(); 
    scriptSet(); 
}); 
</script> 
+0

hm、これがなぜこのように行われているのかに関する情報をどこで得ることができるか教えてください – user667122

+0

['.ready()?'] http://api.jquery.com/ready/)?または[匿名関数](http://helephant.com/2008/08/23/javascript-anonymous-functions/)? –

関連する問題