Fallback for CDN hosted jQuery

Several big companies offer copies of jQuery hosted on their CDN's (Content Delivery Network). Most notoriously Google, but also Microsoft and jQuery themselves. A lot of people swear by this since it saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script.

There is always that twinge of doubt though, that perhaps something goes wrong with these big companies CDN at the script isn't available (it happens). It's more reliable to use your own website, as hey, if they are loading your webpage, then your server is up and will server the script just fine, albeit with out the benefits of the CDN.

So perhaps the best solution is to use both methods! Use the CDN first, and if it fails, load the local copy. Here is a technique:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Comments

  1. User Avatar
    Mateus
    Permalink to comment#

    Man, you’ve read my thoughts, I was searching for this today!

    Thanks!

  2. User Avatar
    CSB

    You can never be too safe :)

  3. User Avatar
    Kartlos Tchavelachvili

    Very cool! I think all sites must use this “solution”.

  4. User Avatar
    Parvez

    Nice solution man! I was searching for this :)

  5. User Avatar
    traq

    huh… I always had a bit of worry in the back of my head about a “hotlinked” js file becoming unavailable for some reason. Hosting my own scripts always seemed safer. Good solution.

  6. User Avatar
    Rakesh Menon

    You have a special tendency to release important articles at just the right time! Thanks.

  7. User Avatar
    CIDIC

    How would you set it up to have more than one backup? If you wanted 3 or 4 would you just use more if statements? I would think there is a more efficient way to check until one that works is found.

    • User Avatar
      TeMc
      Permalink to comment#

      I think more than 1 backup (where the “1” is the local copy you have) doesn’t make sense.

      Having to wait for the client to make multiple connections and fail is way slower than just tring to load from 1 CDN and fallback to local.

  8. User Avatar
    whatdoesitwant
    Permalink to comment#

    Maybe it’s because i’m at the other side of the ocean but i’ve seen it happen that cdn’s load slowly. How long does it take for the response to time out en switch to local? Should I force a time-out after .. miliseconds. How does that work?

    On a sidenote, why not simply:
    !window.jQuery && document.write('')

    • User Avatar
      whatdoesitwant
      Permalink to comment#

      whoops:
      !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')

  9. User Avatar
    Michael
    Permalink to comment#

    Just wondering, but can you have the script load Jquery from a second CDN if the first fails? Using Microsoft as a backup to Google for instance?
    This seems fairly strait forward but I can’t see where anybody has done it.

  10. User Avatar
    Jakub
    Permalink to comment#

    That is very helpful. Thanks for gathering all this info, your work is much appreciated!

  11. User Avatar
    Jake Rocheleau
    Permalink to comment#

    You, sir, are brilliant and thank you for this.

  12. User Avatar
    Bitcoin Gambling
    Permalink to comment#

    Thanks, quick and easy to use code. Will use this on some Bitcoin gambling sites.

  13. User Avatar
    Daniel
    Permalink to comment#

    Hi

    I am adding this to sp2010 master page . Just one thing whey do I need the unescape the xml delimiters. Is this something I should do regularly when using jQuery.

    Daniel
    PS: this is without doubt the most sophisticated (threaded) post comment function I have every seen!

  14. User Avatar
    Jason
    Permalink to comment#

    Seems to me that using the code example above, if the CDN is merely slow but not down, you might end up needlessly loading jQuery into the DOM twice.

  15. User Avatar
    kensley

    Helped me out too. Thanks a lot!

  16. User Avatar
    Livio

    Simple but genial! Thank you

  17. User Avatar
    Deveedutta
    Permalink to comment#

    I have seen another alternate version of this JQuery CDN Fall Back codes. I’d recommend to use Modernizr tools ( http://modernizr.com/) & or, html5boilerplate (http://html5boilerplate.com/). They save a lot of mishaps.

  18. User Avatar
    Casper
    Permalink to comment#

    That’s just what I was looking for :D Thanks.

    But how can I do this, with other scripts, too? Like this one:
    http://browser-update.org/update.js

    It doesn’t seems to work with the typeof thing, if I write update or browser-update or something like that, instead of jQuery.

    Any ideas? Thanks in advance. Again thanks a lot for this post.

    Best regards
    Casper

  19. User Avatar
    himagain
    Permalink to comment#

    I can’t comment on the geeky aspects above, but accidentally clicked on the popup head below…… :-) :-)
    I really needed that after reading about the “problems” of CDN above.

    One of the nicest, cleverest Sites I’ve seen since 1984 – when I started the second BBS in far off Oz (with a lot of tech help – all I supplied was the money and facilities)

    I take it that this NOT a WP Site? :-)

  20. User Avatar
    himagain
    Permalink to comment#

    WOOPS!
    Just looked at the “provenance” of this Site. Even more impressed.

  21. User Avatar
    greg
    Permalink to comment#

    What about for jQuery Mobile?

  22. User Avatar
    jaber
    Permalink to comment#

    and what about jquery-ui ?

  23. User Avatar
    Robbie Jakob-Whitworth
    Permalink to comment#

    I used whatdoesitwant‘s idea, which I actually found somewhere else. Very useful, especially for if I’m developing on my laptop and there’s no Internet connection available.

  24. User Avatar
    nicolas
    Permalink to comment#

    why need to unescape it? I am confused.

  25. User Avatar
    Steve Media
    Permalink to comment#

    I was looking for something similar, can this be altered in a way that would check for a cached version of jquery from google or twitter’s cdn, if it exists, use that, and then if a cahced version is not available in end user’s browser, then load it from our web server instead?

    Basically I am thinking that if the user already has the jquery version that my bootsrap site requires for functionality in their browser cache, then use that.. but I would prefer to load from our server if it is not there and not load it from google or twitter.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag