0

我正在使用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();
});

我想我在这里看到了两个问题。如果modernizr 仍在加载jquery，$ 可能没有定义。另外，Page2Stuff也Page1Stuff可以不定义。

4

1 回答 1

2

在您的模板中：使用现代化的“完成”回调来发出自定义事件以指示加载完成，还设置一个全局变量表示脚本已加载。

在您的页面脚本中：首先检查全局变量以查看是否已加载所有脚本，如果没有，请注册一个处理程序以侦听您在加载完成时发出的自定义事件。

在您的模板代码中：

// 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 回答