Conditionally loading jQuery 2.x

HTML Conditional Comments

lang: markup
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

lang: javascript
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.

lang: javascript
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.