1

我正在使用 Modernizr 有条件地加载资源。我的代码是

<link rel="stylesheet" type="text/css" media="all" href="stylesheet/style.css" />
<script type="text/javascript" src="javascript/jQuery/jquery-1.8.1.min.js"></script>
<script src="javascript/stickyheader/jquery.fixedheadertable.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="javascript/stickyheader/defaultTheme.css" />
<script type="text/javascript" src="javascript/modernizr/modernizr.2.6.2.js"></script>
<script type="text/javascript">
    Modernizr.load([ {
        // If browser supports touch
        test : Modernizr.touch,
        //Load iPad related resorces 
        yep : [ 'javascript/ipad-default.js', 'javascript/touchscroll.js', 'javascript/ipad-scroll.js',
                'javascript/mobile.js' ],
        // Load common resorces 
        load : ['javascript/ipad-default.js']
    } ]);
</script>

这工作正常。但我想知道Modernizr.load当我测试Modernizr.touch.

需要明确的是，我想将所有资源加载到Modernizr.load.

我怎样才能做到这一点？这是一个好方法吗？

4

1 回答 1

3

是的你可以。这绝对是为 Web 应用程序使用资源加载器的好方法。但是，当通过 Modernizr 加载所有 CSS 时，我发现页面渲染有点崩溃。

// You can load CSS just like JS
Modernizr.load("stylesheet/style.css", [
  {
    test : Modernizr.touch,
    yep : [ 'javascript/touchscroll.js', 'javascript/ipad-scroll.js', 'javascript/mobile.js' ],
    load : [ 'javascript/ipad-default.js' ] // No need to specify this in 'yep' too
  }]);

因为Modernizr.load是建立在 上yepnope.js的，yepnope 文档在资源加载方面比 Modernizr 教程更有趣一些。如果您不介意另一个框架，我可以推荐requirejs。这确实有助于解耦和加载您的组件。

于 2012-09-24T16:22:12.887 回答