Skip to content

Instantly share code, notes, and snippets.

@csdy
Last active January 3, 2019 19:50
Show Gist options
  • Save csdy/5450792 to your computer and use it in GitHub Desktop.
Save csdy/5450792 to your computer and use it in GitHub Desktop.
Javascript vendor libraries via CDN with local fallback
<!-- JQUERY -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery-2.0.3.min.js"><\x3C/script>')</script>
<!-- JQUERY UI -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="/js/vendor/jquery.ui-1.10.3.min.js"><\x3C/script>')</script>
<!-- JQUERY VALIDATE -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<script>window.jQuery.validator || document.write('<script src="/js/vendor/jquery.validate-1.11.1.min.js"><\x3C/script>')</script>
<!-- JQUERY COOKIE -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
<script>$.cookie || document.write('<script src="/js/vendor/jquery.cookie-1.3.1.min.js"><\x3C/script>')</script>
<!-- MODERNIZER -->
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>window.Modernizr || document.write('<script src="/js/vendor/modernizr-2.6.2.min.js"><\x3C/script>')</script>
<!-- LESS CSS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<script>window.less || document.write('<script src="js/vendor/less-1.4.1.min.js"><\x3C/script>')</script>
<!-- SELECTIVIZR -->
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<noscript><link rel="stylesheet" href="css/msie.css" /></noscript>
<![endif]-->
<!-- TWITTER BOOTSTRAP -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>$.fn.modal || document.write('<script src="/js/vendor/bootstrap-3.0.0.min.js"><\x3C/script>')</script>
<!-- CKEDITOR -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
<script>window.CKEDITOR || document.write('<script src="/js/vendor/ckeditor/ckeditor.js"><\x3C/script>')</script>
@csdy
Copy link
Author

csdy commented Apr 2, 2015

Because there really is no publicly facing functions to latch onto in either the additional methods or the localization methods, you wouldn't be able to call those scripts in this same manner.

That being said, this method of loading scripts from CDN individually is somewhat antiquated. It's far better to use a build tool (like Grunt) to pull in all vendor libraries and compile them into a single script file. Then, of course, you would want to host that script file on a CDN service like MaxCDN or Amazon S3. Not only would this reduce HTTP requests tremendously, but it would reduce overall filesize, reduce load time by having the resource on a cookie-less domain, but would also ensure that you are always incorporating the latest versions of these libraries into your project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment