0

を使用してJavaScriptファイルを読み込んでいますModernizr.load()。ここで、すべての読み込みが完了した後、各ページが独自のinitメソッドを呼び出す必要があるとします。しかし、子ページを認識しないテンプレートマスターに読み込みを入れました。依存関係の読み込みが完了したことをページはどのようにして知ることができますか？

脚本

Page1Stuff= {
   init: function(){ alert('page 1 executed'); }
}
Page2Stuff= {
   init: function(){ alert('page 2 executed'); }
}

サイトマスターテンプレート

//Modernizr loads the script.
Modernizr.load([{
    load: 'jquery.js',
},
{
    load: 'script.js'
}]);

ページ1

$(function() {
    Page1Stuff.init();
});

2ページ

$(function() {
    Page2Stuff.init();
});

ここに2つの問題があると思います。modernizrがまだjqueryをロードしている場合、$が定義されていない可能性があります。また、Page2StuffまたはPage1Stuffが定義されていない可能性があります。

4

1 に答える 1

2

テンプレートの場合：モダナイザーの「complete」コールバックを使用してカスタムイベントを発行し、読み込みが完了したことを通知します。また、スクリプトが読み込まれたことを示すグローバル変数を設定します。

ページスクリプトで：最初にグローバル変数をチェックして、すべてのスクリプトがロードされているかどうかを確認します。ロードされていない場合は、ハンドラーを登録して、ロードが完了したときに発行するカスタムイベントをリッスンします。

テンプレートコード：

// A simple object that calls its listeners when modernizer script loading completes.
global_scriptLoadingMonitor = (function() {
   var listeners = [];
   var isComplete = false;
   return {
      "addListener": function (listener) {
         listeners[listeners.length] = listener;
      },
      "complete": function () {
         isComplete = true;
         for (var i = listeners.length - 1; i >= 0; i--) {
            listeners[i]();
         }
      },
      "isComplete": isComplete
   }
})();

Modernizr.load([{
    load: 'jquery.js',
},
{
    load: 'script.js'
    complete: function () {
    {
       global_scriptLoadingMonitor.complete();
    }
}]);

今あなたのPage1でこれを行います：

if (global_scriptLoadingMonitor.isComplete) {
    $(function() {
        Page1Stuff.init();
    });
} else {
    global_scriptLoadingMonitor.addListener(function() {
        $(function() {
           Page1Stuff.init();
        });
    });
}

そしてpage2についても同様です。

于 2011-07-24T12:51:38.937 に答える