jQuery and jQuery UI Fallbacks

Tags: jQuery, jQuery-UI

If you are familiar with using Content Delivery Networks (CDNs) then you might be familiar with the situation of the CDN temporarilly going offline. In this case, any of your referenced files will not be loaded into your HTML page, which will potentially break everything.

You may also be familiar with HTML5 Boilerplate, who in their default index.htm page, provide you with a great bit of javascript code to use for the default jQuery library fallback.

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

Here you will see that there is a reference to Googles CDN for the jQuery library, a protocol relative URL, and the fallback code. If jQuery is not loaded via the CDN, then a reference to the local file is added.

The same code can then be applied when using the jQuery UI Library. I use the one supplied via the Microsoft;

<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<script>  window.jQuery.ui || document.write('<script src="/content/js/libs/jquery-ui-1.8.17.min.js"><\/script>'</script>

Again if the CDN library is not loaded, then just add a reference to the local file.

What about the CSS file?

If you are using a CDN reference for your javascript file, then why not do the same with the css file?

A great method for a jQuery UI CSS file fallback was provided by @olimortimer (JSFiddle)

Reference the CDN css file in your Head section

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />

You will need to add a single line of HTML to your page, I put it directly after the Body tag.

<div class="ui-helper-hidden"></div>

Then after your jQuery and jQuery UI fallback coding, you could add the following;

    // jQuery UI CSS Fallback
    $(function () {
        if ($('.ui-helper-hidden:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="/Content/Css/jquery-ui.css" />').appendTo('head');

The code checks to see if the <div> with the class is visible or not, if it is visible, then the CDN has failed. We can then add a reference to your local copy.


After recently reading a blog post by Scott Hanselman on the same subject, CDNs Fail Buy Your Scripts Dont Have To, he replied to my comment pointing me towards a stackoverflow question. This uses an alternative method for testing if the css file has been loaded.

Here are some handy jQuery and jQuery UI CDNs

PLEASE LEAVE COMMENTS! I am always interested in hearing back from those who read my blog. Please leave a comment if you found this useful, want to suggest any changes to my code, or anything else! Thanks!


  • tomByrer said

    You can add these 2 jQuery CDNs:

  • Rich Johnson said

    My workaround was to include the Local CSS if I couldn't detect jqueryui was loaded

    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script>window.jQuery.ui || document.write('<script src="/js/jquery-ui-1.10.3.min.js"><\/script><link rel="stylesheet" href="/css/smoothness/jquery-ui-1.10.3.min.css">')</script>

  • Seth said

    The stackoverflow answer that Scott Hanselman referenced will not work with Firefox for example. It throws an error: "SecurityError: The operation is insecure." Your way is better work around working across many browsers.

  • Joseph Rex said

    Rich Johnson: I like your idea but there seems to be a shortcoming with it. How does that get appended to the head because I definitely won't want my jQuery UI CSS file to load up after the HTML file has loaded without styles

Comments have been disabled for this content.

Fork me on GitHub