2011-09-05 13 views
12

を待っている、私はAJAX呼び出しの結果として、このコードを挿入する必要があります。私のページ本体では、動的にロードされるスクリプト

<p>Loading jQuery</p> 
    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script> 
    <p>Using jQuery</p> 
    <script type='text/javascript'> 
     $.ajax({ 
      ... 
     }); 
    </script> 

私はドキュメントがすでにロードされているので$.load()を使用するので、イベントはできません発火しない。

これは安全ですか?そうでない場合は、カスタム生成コードが実行される前にjqueryスクリプトがロードされていることを確認するにはどうすればよいですか。

+1

を負荷リスナーを追加します** [動的に追加のスクリプトタグの読み込み順序を](http://stackoverflow.com/a/ 38840724/2247494)** – jherax

答えて

16

かなり安全です。歴史的には、<script>タグはフルブロックであるため、前の解析/出力が終了する前に2番目の<script>タグが検出されません。 「近代的な」ブラウザは、スクリプトを非同期的に読み込んで延期する傾向があるだけであるという問題があります。だから、必ず順序が正しいようにするために、このようにそれを使用します。

<p>Loading jQuery</p> 
<script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'></script> 
<p>Using jQuery</p> 
<script type='text/javascript'> 
    $.ajax({ 
     ... 
    }); 
</script> 

しかし、それはおそらく、それは代わりにDOMにHTML文字列としてこれを押すことで、動的スクリプトタグの挿入を使用し、より良いアイデアです。同じ話になるでしょう

var scr = document.createElement('script'), 
    head = document.head || document.getElementsByTagName('head')[0]; 
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js'; 
    scr.async = false; // optionally 

head.insertBefore(scr, head.firstChild); 
+2

'appendChild'の代わりに' insertBefore'を使用する利点はありますか? – Joe

+6

現代のブラウザは、asyncrououslyと 'deync'が指定されている場合にのみ、asyncrounouslyまたはdeferredのスクリプトを実行します。 'async = false'と' defer = false'はHTMLではまったく必要ありません。しかし、動的に作成されたスクリプトでは、デフォルトで 'async'がtrueに設定されています。そのため、2番目のコードサンプルでは' scr.async = false; 'が必要です。 http://www.html5rocks.com/en/tutorials/speed/script-loading/ – Flimm

0

$ .ajaxと$ .loadは同じものです。いずれかを使用することができます。ページ上のスクリプトタグに$ .loadを置くと、$ .ajax()のように読み込まれると起動します。

あなたが何かをする前にスクリプトが起動するのを待つことについては、Tomalakの言葉はちょっと真実です。例外は非同期呼び出しです。 JavascriptはAJAX呼び出しを行い、スクリプトの実行を継続し、AJAX呼び出しが応答すると、それが何をするかに応じて成功/失敗を実行します。

ここでJSを返すのを待つことを望んでいるとしましょう.1回の呼び出しで、成功のコールバックにすべてのものをラップするだけです。そうでない場合は、クールな方法で$ .deferredを使用できます。これにより、ajax呼び出しを1つまたは複数作成し、終了後にのみコードを実行することができます。

$ .when & $。これはおそらくこの状況に最適です。

あなたのやっていることは何でも安全です。

8

jQuery 1.6にも新機能があります。それはjQuery.holdReady()と呼ばれます。それは実際には自明です。 jQuery.holdReady(true)に電話すると、jQuery.holdReady(false)に電話するまでreadyイベントは発生しません。これをfalseに設定しても自動的に準備完了イベントが発生することはありません。ここで

が文書から取られたスクリプトを読み込むの非ブロックの例である:

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

参照http://api.jquery.com/jQuery.holdReady/詳しく

13

のためにあなたがそれを照会できるように、スクリプトファイルにIDを追加します。

<script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script> 

次に、この関連の答えをチェックするJavaScript

でそれに
<script> 
    var script = document.querySelector('#hljs'); 
    script.addEventListener('load', function() { 
    hljs.initHighlightingOnLoad(); 
    }); 
</script> 
+1

をよくご覧ください。ありがとう – onalbi

関連する問題