Conditionally loading jQuery 2.x

HTML Conditional Comments

1
2
3
4
5
6
7
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--<![endif]-->

yepnope

1
2
3
4
5
6
7
<script>
    yepnope({
        test: document.addEventListener,
        yep: '//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js',
        nope: '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'
    });
</script>

RequireJS

This will depend on your RequireJS structure, but one way to do this is at the path configuration for jQuery in requirejs.config.

1
2
3
4
5
6
7
8
requirejs.config({
    paths: {
        "jquery": (document.addEventListener) ?
            ['//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min','jquery-2.0.2.min']
            :
            ['//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min','jquery-1.10.1.min']
    }
});

Here is an example RequireJS project with this setup, including the local file fallback.

Another way to do conditional loading with RequireJS is using a loader plugin in conjunction with the map configuration option https://github.com/jrburke/requirejs/issues/451 , though I ran into difficulties getting this setup to work properly.