13

ページが完全に読み込まれた後に jquery を読み込む方法を探しています。
ここにはそれに関する多くの質問と回答がありますが、ページまたはjqueryが完全にロードされた後にjqueryを必要とするスクリプトを実行する方法がすべて説明されています。
私が探しているのは、ページをロードしてからjqueryを呼び出し、jqueryがロードされた後に関数を呼び出すことです。何かのようなもの：

document.onload=function(){
   var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.7.2.min.js');
//Here I need an event to know that jquery is 
//loaded to run stuff that needs jquery
}
4

11 に答える 11

22

これを試して：

 $(document).ready(function() {
// When the document is ready
// Do something  
});
于 2013-09-26T11:44:15.287 に答える
8

以下も使用できます。

$(window).bind("load", function() { 
    // Your code here.
});
于 2015-04-21T07:20:15.890 に答える
6

問題の解決策は、Google がホストする CDN を特定のライブラリに接続することです。

https://developers.google.com/speed/libraries/devguide

また、これをページの下部 (の直前</body>)に追加することもできます。

<script type="text/javascript">
(function() {
    var script = document.createElement('script')
    script.setAttribute("type", "text/javascript")
    script.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js")
    document.getElementsByTagName("head")[0].appendChild(script)
})();
</script>

しかし、これは私の意見では危険です。jquery の非同期呼び出しがあるため、jquery はロードされるまで待機する必要があります (つまり$(document).ready、この場合は機能しません)。したがって、私の答えは次のようになります。Googleが提案するようにCDNを使用してください。直前にJavaScriptを下に置きます</body>。そして、プロファイラーからのフラグを無視します。

于 2013-09-26T11:22:06.763 に答える
2

関数を使用して、jQuery オブジェクトがロードされるまで待機するタイムアウトを使用することができます

コード：

document.onload=function(){
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.7.2.min.js');
    document.getElementsByTagName("head")[0].appendChild(fileref);
    waitForjQuery();
}

function waitForjQuery() {
    if (typeof jQuery != 'undefined') {
        // do some stuff
    } else {
        window.setTimeout(function () { waitForjQuery(); }, 100);
    }
}
于 2013-09-26T11:15:44.327 に答える
0

コンテンツがロードされるまで jquery のロードを回避しようとしている場合、最善の方法は、他の多くの回答が述べているように、単にページの下部に参照を配置することです。

Jquery の使用に関する一般的なヒント:

  1. CDN を使用します。このようにして、ユーザーが自分のコンピューターに持っている可能性が高いキャッシュ バージョンをサイトで使用できます。先頭の//により、http か https かに関係なく、呼び出す (同じリソースを使用する) ことができます。例：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

CDN を使用することには、いくつかの大きな利点があります。ユーザーが別のサイトから CDN をキャッシュする可能性が高くなるため、ダウンロードが発生しなくなります (レンダリング ブロックも発生しません)。さらに、CDN は利用可能な最も近い最速の接続を使用します。つまり、CDN をロードする必要がある場合は、サーバーに接続するよりもおそらく高速になります。詳細は Google から。

  1. スクリプトを一番下に配置します。できるだけ多くの js をページの下部に移動します。php を使用して、フッターの下にすべての JS リソースを含むファイルを含めます。

  2. テンプレート システムを使用している場合は、html 出力全体に JavaScript を配置する必要がある場合があります。ページのレンダリング時に呼び出されるスクリプトで jquery を使用している場合、これによりエラーが発生します。jquery が読み込まれるまでスクリプトを待機させるには、スクリプトを

    window.onload() = function () { //... your js that isn't called by user interaction ... }

これによりエラーが防止されますが、ユーザーの操作の前にタイマーなしで実行されます。

もちろん、jquery がキャッシュされている場合、レンダリングをブロックしていることを知らせるページ速度ツールを除いて、jquery をどこに置くかはあまり問題になりません。

于 2015-01-31T21:30:34.957 に答える