使用Modernizr.load

Question

我使用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所有资源。

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

Answer 1

是的你可以。 对于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 。 这个真的有助于解耦和加载您的组件。