javascript - Use of Modernizr.load - Stack Overflow

admin管理员组

文章数量:1406913

I am using Modernizr for conditional loading of resources. My code is

<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 mon resorces 
        load : ['javascript/ipad-default.js']
    } ]);
</script> 

This is working fine. But I am wondering if I can load all resources in Modernizr.load when I test for Modernizr.touch.

To be clear I want to load all resources within Modernizr.load.

How can I do this? And is this a good approach?

I am using Modernizr for conditional loading of resources. My code is

<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 mon resorces 
        load : ['javascript/ipad-default.js']
    } ]);
</script> 

This is working fine. But I am wondering if I can load all resources in Modernizr.load when I test for Modernizr.touch.

To be clear I want to load all resources within Modernizr.load.

How can I do this? And is this a good approach?

• javascript
• jquery
• modernizr

Share Improve this question Follow edited Sep 24, 2012 at 14:40 Liam 29.8k2828 gold badges139139 silver badges203203 bronze badges asked Sep 24, 2012 at 14:19 Android LearnerAndroid Learner 2,57966 gold badges3535 silver badges4343 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Yes you can. It definitely is a good approach to use a resource loader for a web application. However, I found the page rendering to be a little shattering when loading all CSS through Modernizr.

// 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
  }]);

Because Modernizr.load is built on yepnope.js, the yepnope documentation is a little more interesting for resource loading than the Modernizr tutorials. If you don't mind yet another framework, I can remend requirejs. This one really helps to decouple and load your ponents.

本文标签： javascriptUse of ModernizrloadStack Overflow