リクエストに応じてスクリプトを遅延ロードするコードはすでにあります。私の問題は、オブジェクトが利用可能になるまで特定のコードを実行するのを待っています。setTimeout()は実行をブロックしないため、使用できません。
では、ブラウザをロックせずに、ロードを「待機」するための良い方法は何でしょうか。
繰り返しますが、raw setTimeout()を使用することはできません。
リクエストに応じてスクリプトを遅延ロードするコードはすでにあります。私の問題は、オブジェクトが利用可能になるまで特定のコードを実行するのを待っています。setTimeout()は実行をブロックしないため、使用できません。
では、ブラウザをロックせずに、ロードを「待機」するための良い方法は何でしょうか。
繰り返しますが、raw setTimeout()を使用することはできません。
私は実際にダニエルが言ったのとは違うやり方をします。すべての要素はロード時に load イベントを発生させ、Javascript ファイルはコンテンツの評価後にロードされます。したがって、使用可能になった後に実行を継続するようにイベント ハンドラーを設定できます。
var loadScript = function(fileName, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = fileName;
script.onload = callback;
script.onreadystatechange = function() {
if(this.readyState == 'complete') {
callback();
}
};
head.appendChild(script);
};
そして使用例:
var bar = function() {
Foo.baz();
};
if(!window.Foo) {
loadScript('Foo.js',bar);
} else {
bar();
}
スクリプトのコンテンツを制御すると仮定すると、遅延読み込みスクリプトの最後に実行するコードを配置して、スクリプトが読み込まれたことをメイン ページに示すことができます。たとえば、ページで次のようなことができます。
var loadingScripts = 0;
var loadScript = function() {
// Do what you need to do to load the script...
loadingScripts++;
}
var loadedScript = function() {
loadingScripts--;
if (loadingScripts == 0) {
// Kick off execution of code that requires the lazy loaded scripts.
}
}
次に、スクリプトの末尾に次のコードを追加します。
loadedScript();
整数の代わりに配列を使用して、この例にスパイスを加えることができます (どの特定のスクリプトが読み込まれたかを追跡するため)。代わりにオブジェクトを使用して、特定の関数呼び出しを特定のスクリプトの完了に関連付けることもできます。例は単純にしましたが、コードを拡張する方法を示してほしいかどうか尋ねてください。
コールバックを使用して、スクリプトのロード時に特定のコードの実行を継続する方法を次に示します (スクリプト自体を制御すると仮定します)。
var scriptCallbacks = {}
var loadScript = function(scriptname, callback) {
// Do what you need to load scriptname
scriptCallbacks[scriptname] = callback;
}
var loadedScript = function(scriptname) {
(scriptCallbacks[scriptname])();
}
次に、スクリプトをロードしたいときは、次のようにします...
var callback = function() {
// Write exactly what you want executed once your script is loaded
}
loadScript("MyScript.js", callback);
繰り返しますが、遅延読み込みスクリプトの最後にこのコードを追加して、コールバックを起動するように通知します。
loadedScript("MyScript.js");