Modernizr.load的使用

Question

我正在使用现代派的条件加载资源。我的代码是

<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应用程序中使用资源加载器无疑是一种很好的方法。但是，我发现在通过现代派加载所有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上的，所以无障碍文件在资源加载方面比现代化教程更有趣。如果您不介意另一个框架，我可以推荐所需。这确实有助于解耦和加载您的组件。