webSIGHTdesigns - Web Design, Web Development, Web Hosting

JavaScript CDN with Fallback to Local Script

Posted on Thursday, October 10th, 2013 at 6:04 pm
by webSIGHTdesigns

Load jQuery, jQuery UI, Twitter Bootstrap and TinyMCE from a CDN with automatic fallback to a local copy.

The benefit of loading libraries like jQuery and Bootstrap from a CDN is that if web developers everywhere load the libraries from the CDN then visitors to the website may already have the library loaded in their cache. Everyone loves a page that loads faster, but what if the CDN is down temporarily for maintenance? These code snippets can help you detect if the CDN version was loaded, and if not load a local copy of the JS or CSS file instead.

Loading CDN JavaScript Files with Fallback to Local Files

To load both jQuery and jQuery UI from CDN with automatic fallback to a local copy, you can use the following code snippet:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>window.jQuery.ui || document.write('<script src="/js/jquery-ui-1.10.3.min.js"><\/script>')</script>

If you haven't seen it before, by omitting the "http:" before the src attribute we our document will be loaded using whichever protocol is currently in use (http or https). If your use case differs you can just specify one protocol or the other instead.

Loading CDN Stylesheets with Fallback to Local Files

To load the Twitter Bootstrap or other stylesheet files from a CDN, with automatic fallback to a local copy, use the following code:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script>
	function cssLoaded(href) {
		var cssFound = false;
		for (var i = 0; i < document.styleSheets.length; i++) {
			var sheet = document.styleSheets[i];
			if (
				sheet['href'] == "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" ||
				sheet['href'] == "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
			) {
				cssFound = true;
			}
		};
		return cssFound;
	}
	if (!cssLoaded('bootstrap.min.css')) {
		local_bootstrap = new CustomEvent('link');
		local_bootstrap.setAttribute("rel", "stylesheet");
		local_bootstrap.setAttribute("href", "/css/bootstrap.min.css");
		document.getElementsByTagName("head")[0].appendChild(local_bootstrap);
	}
</script>

Other Examples

And for the Twitter Bootstrap JavaScript:

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>$.fn.modal || document.write('<script src="/js/bootstrap.min.js"><\/script>')</script>

And for TinyMCE:

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>window.tinymce || document.write('<script src="/js/tinymce.min.js"><\/script>')</script>

Resources

Please Sign In

Please sign in to post a comment.

Web Development

View details »

Web Hosting

View details »

Our Portfolio

View portfolio »

WebSight Designs webSIGHTdesigns preferred email webSIGHTdesigns United States United States