HTML5Boilerplate / include libraries - fallback?
Iam currently wondering some things about HTML5BP...
I want to include JQuery mobile and JQuery UI and Iam not sure if this is the right way:
<body>
<!-- scripts and fallback to local -->
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script src="//code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-ui.min.js"><\/script>')</script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.mobile.min.js"><\/script>')</script>
<!-- end scripts and fallback to local -->
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></scr开发者_开发百科ipt>
<script src="js/script.js"></script>
<!-- end scripts concatenated and minified via ant build script-->
The thing why Iam not sure is, that when Iam behind a proxy and not allowed to access the internet, I expect the local fallback to work, but its not. Iam getting an authentication error and the page is not loading.
Is this the way how to include it correctly?
In head i prefetch:
<link rel="dns-prefetch" href="//code.jquery.com" />
Thanks!
Not sure if you are still looking for assistance here but here's goes. Your dns-prefetch is correct and the script loading is basically correct with two issues:
- You're only ever checking is jQuery is loaded for your fallbacks. This means if jQuery loads correctly but, for some reason, jQuery UI or Mobile doesn't your fallbacks for those won't work. Not entirely likely since your loading from the same place but still...
- Your ordering is, imo, wrong. I think you should check immediately after each - just less confusing. It also makes it harder to mess up the loading order - the mobile detection below will most likely error if jQuery isn't loaded first...
I've modified your code below. Note the mobile detection is my own invention (in the last 5 minutes). It's working but I can't guarantee rock-solid awesomeness!
<body>
<!-- scripts and fallback to local -->
<script src="//code.jquery.com/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="//code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui.min.js"><\/script>')</script>
<script src="//code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script>window.$.mobile || document.write('<script src="js/libs/jquery.mobile.min.js"><\/script>')</script>
<!-- end scripts and fallback to local -->
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts concatenated and minified via ant build script-->
+1 lnrbob
I usually also do a conditional for jQuery versions to lighten to page up for normal browsers and send the old jQuery to the duds.
<!--[if (gte IE 9) | !(IE)]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>if (!!window.jQuery && jQuery().jquery !== '2.0.3') document.write('<script src="<?= ASSETS ?>js/jquery.2.0.3.min.js" type="text/javascript"><\/script>')</script>
<!--<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>if (!!window.jQuery && jQuery().jquery !== '1.10.2') document.write('<script src="<?= ASSETS ?>js/jquery.1.10.2.min.js" type="text/javascript"><\/script>')</script>
<![endif]-->
加载中,请稍侯......
精彩评论