Grow your CSS skills. Land your dream job.

Last updated on:

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>

Reference URL

Comments

  1. Mateus
    Permalink to comment#

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

    Thanks!

  2. CSB

    You can never be too safe :)

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

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

  9. 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. You, sir, are brilliant and thank you for this.

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

  13. 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. 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. Helped me out too. Thanks a lot!

  16. Simple but genial! Thank you

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

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

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".