他のすべてがロードされるまでjqueryスクリプトを遅らせる


111

他のすべてのJavaScript(制御できない)を含めて、ページ上の他のすべてのものを1回だけ実行する必要があるjqueryスクリプトがあります。

$(document).readyに代わるものがあるかもしれませんが、それを見つけることができませんでした。

回答:


217

$(document).ready()1つのページで複数回使用できます。コードは出現順に実行されます。

$(window).load()これは、ページが完全に読み込まれ、さまざまな$(document).ready()ハンドラーのすべてのコードの実行が完了した後で発生するため、コードにイベントを使用できます。

$(window).load(function(){
  //your code here
});

1
この方法を使用して外部スクリプトをインポートできますか?
chrism

1
確かに、すでに$(document).ready()内でこれを行っている場合、これは違いはありません。
ホセ・バシリオ

7
jqueryのコードが順番に実行されることに気づかなかったので、この回答は役に立ちました
Sevenearths

1
どうもありがとうございます!これにより、.height()の問題が修正され、ページが(どうやら)まだロードされていないため、正しい高さが取得されませんでした。
Jon

6
JQuery 3.0では$(window).on('load', function() { });、$(window).load()が非推奨であるため、構文を使用する必要があります。
Alex H

13

このコードブロックは私の問題を解決し、

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>


jQueryがすでにロードされているかどうかを確認するために、jQuery関数をどのように実行できますか?これは、チェックの前にjQueryがロードされている場合にのみ機能します。
HelpNeeder

11

$(document).ready()ページのトップダウンで複数が発火します。最後$(document).ready()はページの最後に発生します。最後の内で、$(document).ready()新しいカスタムイベントをトリガーして、他のすべての後に発生させることができます。

新しいカスタムイベントのイベントハンドラーでコードをラップします。

<html>
<head>
<script>
    $(document).on("my-event-afterLastDocumentReady", function () {
        // Fires LAST
    });
    $(document).ready(function() {
        // Fires FIRST
    });
    $(document).ready(function() {
        // Fires SECOND
    });
    $(document).ready(function() {
        // Fires THIRD
    });
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
    $(document).ready(function() {
        // Fires FOURTH
        // This event will fire after all the other $(document).ready() functions have completed.
        // Usefull when your script is at the top of the page, but you need it run last
        $(document).trigger("my-event-afterLastDocumentReady");
    });
</script>

3

ここから:

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() 
{ 
    if(typeof unsafeWindow.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    } 
    else 
    { 
        $ = unsafeWindow.jQuery; 
        letsJQuery(); 
    } 
} 

GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() 
{
    // Do your jQuery stuff in here    
} 

これは、jQueryがロードされて使用されるまで待機しますが、同じ概念を使用して、他のスクリプトで変数を設定(またはスクリプトでない場合はそれらをチェック)して、それらが使用されるようにロードされるまで待機します。

たとえば、私のサイトでは、これを非同期のJS読み込みに使用し、jQueryを使用して何かを行う前に、JSの読み込みが完了するまで待機します。

<script type="text/javascript" language="JavaScript"> 
    function js(url){
        s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.getElementsByTagName("head")[0].appendChild(s);
    }       

    js("/js/jquery-ui.js");
    js("/js/jrails.js");
    js("/js/jquery.jgrowl-min.js");
    js("/js/jquery.scrollTo-min.js");
    js("/js/jquery.corner-min.js");
    js("/js/jquery.cookie-min.js");
    js("/js/application-min.js");

    function JS_wait() {
        if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
            typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
            typeof getLastViewedArchive == 'undefined' || // set in application-min.js 
            typeof getAntiSpamValue == 'undefined') // set in application-min.js
        { 
            window.setTimeout(JS_wait, 100); 
        }
        else 
        { 
            JS_ready(); 
        }
    }

    function JS_ready() {
        // snipped
    };

    $(document).ready(JS_wait);
</script> 

これは、jQueryが読み込まれるまで待機し、ページの他の側面を無視します。@requireディレクティブをサポートしない古いバージョンのgreasemonkeyのハックに過ぎません。
Cheekysoft 2009年

1
他のコードが読み込まれるまで待機するためにjQueryで同じ概念を使用する方法の例として、コードを追加しました。
クリスドッグジェット、

1

判明したのは、他のフレームワークのいずれかが提供するイベントリスナーを使用してスクリプトを開始するために必要なJavaScriptフレームワークの独特な組み合わせのためです。


3
あなたが解決策を見つけたことをうれしく思いますが、あなたの答えは詳細がなければ他の人にとって役に立ちません...
Andrew

1

を使用してすべての初期化関数をロードし、$().ready最後に必要なjQuery関数を実行してみましたか?

おそらくあなたは使うことができます setTimeout()$().ready、実行したい機能でして、ロードしたい機能を呼び出すことができます。

または、setInterval()間隔チェックを使用して、他のすべてのロード関数が完了したかどうかを確認します(状態をブール変数に格納します)。条件が満たされると、間隔をキャンセルしてロード機能を実行できます。


どういう意味かわかりません。jqueryスクリプトを使用してすべてのスクリプトをインポートし、スクリプトを最後に置くことをお勧めしますか?もしそうなら、それはどのように見えますか(私は貿易のデザイナーなので、大きな言葉は使わないでください:))
chrism

$(document).ready(function(){callLoadFunction1(); callLoadFunction2(); calljQueryLoadFunction();});
リチャードクレイトン

他のスクリプトはすべて外部ファイルなので、これが機能するかどうかはわかりませんか?
chrism

@chrism:2番目の例を見てください。他の外部JSファイルがロードされたことを示す変数が設定されるまで待機してから、何もしません。最後に実行するコードをJS_ready()メソッドに配置するだけです。それはまさにあなたが探しているものを実行します。
Chris Doggett、

2
そのまま使用$(window).load(function(){...})
Ryan Taylor 14年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.