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 documentation对于资源加载比Modernizr教程更有趣。如果你不介意另一个框架，我可以推荐requirejs。这个有助于解耦和加载组件。

使用Modernizr.load

1 个答案: