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 に答える