ページ内の特定のスクリプトが最後に実行されることを確認する必要があります。JQueryを使うことを考えました
$(document).ready( ... )
しかし、このタイプの関数が他にもある場合、実際に最後に実行されるのはどれですか?
ページ内の特定のスクリプトが最後に実行されることを確認する必要があります。JQueryを使うことを考えました
$(document).ready( ... )
しかし、このタイプの関数が他にもある場合、実際に最後に実行されるのはどれですか?
これは、それらを登録した順序によって異なります。
例えば:
$(document).ready( function() { alert("first"); });
$(document).ready( function() { alert("second"); });
$(document).ready( function() { alert("third"); });
「最初」、「2番目」、「3番目」の順に警告します
したがって<script>
、ページの下部に a を追加する$(document).ready( yourfunction );
だけで十分です。
スクリプトの実行を遅らせる方法はたくさんあります。
それらすべてをプログラムで検出する方法はありません。
信頼できる解決策を得るには、関心のある各ページのコードをリバース エンジンし、そのページが何を (いつ) 行っているかを把握し、そのページ専用の遅延スクリプトを作成する必要があります。(「信頼できる」という値は、「ページを変更するまで」に等しい)。
理論的には、次のようなことができます。
// Form array of functions which sould be called with according order
$.readyArray = [function () { ... }, function () { ... }, function () { ... }, ...];
// just execute them in this order when onready event
$(document).ready(function() {
for (var i = 0; i < $.readyArray.length; i++) {
//apply, calls function in current context and pass arguments object
$.readyArray[i].apply(this,[arguments]);
}
});
$(document).ready( ... )
最後に実行されません。最後に実行された関数 (ドキュメントの準備ができた後) は、 からの関数<body onload>
です。
例 :<body onload="myJSfunction();">
ここでは、JavaScriptmyJSfunction
は $(document).ready( ... ) の後に最後に実行されます。
( Quentinが提案したように)リファクタリングがオプションでない場合 (たとえば、フレームワークまたは製品の一部のみを更新する場合)、4 つのアプローチを使用できます。これにより、必要なものを達成できる可能性が高くなります。jQuery を使用した次のスニペットを参照してください。
(1)「ドキュメント」の準備が整うまで待つ
ドキュメントとは、目に見える DOM を意味します。スクリプトは、レンダリングする必要があるすべてが実際にレンダリングされたときに起動します。
$(document).ready(function() {
console.log('Document is ready.');
});
(2) トップレベルの JS (ルート) 'window' オブジェクトの準備ができるまで待ちます
完全なルート オブジェクトは、DOM の準備ができてからしばらくすると準備が整います。
$(window).ready(function() {
console.log('Window is ready.');
});
(3) .bind を使用して「window」が完全に読み込まれるまで待ちます
これは「window」の準備ができた直後に起動するため、スクリプトは$(window).ready()
上記でレンダリングされたオブジェクト (要素) に作用できます。
$(window).bind("load", function() {
console.log('Window bind is ready.');
});
(4) Ajax呼び出しが完了するまで待つ
スクリプトは、'window' の準備が整い、ロードされ、すべてのコードが実行され、すべての Ajax アクションが完了すると起動します。残念ながら、ある Ajax は別の Ajax を呼び出すことができるため、ページの読み込み中に複数回起動する可能性があります。
$(window).ajaxComplete(function() {
console.log('Window bind is ready, Ajax finished.');
}
シンプルな Javascript ソリューションでは、script タグ内の HTML ドキュメントの最後で JavaScript 関数を呼び出すことができます。これは、jQuery を使用していない場合にうまく機能します。
jQuery の場合、load メソッドを使用できます。要素とすべてのサブ要素が完全に読み込まれると、要素に load イベントが送信されます。
詳細については、