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"));

Reference URL


  1. Mateus
    Permalink to comment#

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


  2. CSB

    You can never be too safe :)

  3. Kartlos Tchavelachvili

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

  4. Parvez

    Nice solution man! I was searching for this :)

  5. 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. Rakesh Menon

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

  7. 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.

    • 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. 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('')

    • whatdoesitwant
      Permalink to comment#

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

  9. 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. Jakub
    Permalink to comment#

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

  11. Jake Rocheleau
    Permalink to comment#

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

  12. Bitcoin Gambling
    Permalink to comment#

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

  13. Daniel
    Permalink to comment#


    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.

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

  14. 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. kensley

    Helped me out too. Thanks a lot!

  16. Livio

    Simple but genial! Thank you

  17. 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. 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:

    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

  19. 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. himagain
    Permalink to comment#

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

  21. greg
    Permalink to comment#

    What about for jQuery Mobile?

  22. jaber
    Permalink to comment#

    and what about jquery-ui ?

  23. 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. nicolas
    Permalink to comment#

    why need to unescape it? I am confused.

  25. 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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.