How to fail-over to a local copy if a loading jQuery via CDN doesn’t work

So you want to use jQuery on your site, but you want to take advantage of Google’s (or Microsoft’s) offer to host the libraries for you and serve them up for you. First of all, why would you want to do that?

Well, jQuery is one of the most popular and widely used JavaScript libraries around. If everyone hosts their own copy of the library then every user that surfs every site on the web will have to download a different copy of the file. That’s not very efficient. It not only clogs up the innerwebs, it also slows down their surfing experience — and reflects poorly on your site.

To address this both Google and Microsoft have CDN’d the libraries. This serves a few purposes.

First, you reduce the amount of bits served out by your server, potentially saving you money.

Two, because the content is hosted on a CDN, they get a copy of the library that’s closest to where they are, resulting in a faster download.

Third, because you’re pulling the file from a popular server it’s very likely that other sites the end-user has visited have also pulled the library from one of those CDN’d sources, thereby caching the file on their machine, so they don’t even have to download it again. Much faster!

All that’s great, until something breaks, as happened recently with my day job.

We’re using Google to CDN our jQuery and jQueryUI bits for us. So far so good. Until you consider that jQuery et. al. are javascript, and like most enterprise’s, we block javascript from all but “Trusted” sites. Google isn’t on the trusted list, so javascript from them gets blocked.

Another scenario would be if someone is blocking Google traffic (ad blocking, etc.), or if Google’s CDN is simply unreachable for some unknown reason. In either of those cases, the site doesn’t function as elegantly as we’d like it to because jQuery isn’t loaded. ACK!

To address this, you can give up all the advantages of CDNing your jQuery libraries by hosting it yourself, but we don’t want to do that if we can avoid it.

How about if we load up our own, self-hosted libraries, but ONLY if the CDN’d copy doesn’t work (for reasons that we don’t really care about)?

That’s just what my buddy Doomhamster did with this fancy bit of scripting magic.

<script language=”javascript” type=”text/javascript” src=”http://www.google.com/jsapi?key=YOUR-KEY-HERE”></script>
<script language=”javascript” type=”text/javascript”>
google.load(“jquery”, “1”);
google.load(“jqueryui”, “1”);

if (typeof jQuery === ‘undefined’) { //failover to local jQuery if CDN failed.
document.write(unescape(“%3Cscript src=’/js/jquery-1.4.2.min.js’ type=’text/javascript’%3E%3C/script%3E”));
document.write(unescape(“%3Cscript src=’/js/jquery-ui-1.8.5.custom.min.js’ type=’text/javascript’%3E%3C/script%3E”));
}
</script>

See what he did there? If not, you probably shouldn’t be playing with jQuery anyway. :)

Hat-tip: Doomhamster

Subscribe

Subscribe to our e-mail newsletter to receive updates.

, ,

2 Responses to How to fail-over to a local copy if a loading jQuery via CDN doesn’t work

  1. joelevi November 5, 2010 at 10:01 pm #

    How to fail-over to a local copy if a loading jQuery via CDN doesn’t work http://joethewebguy.net/2010/how-to-fail

    • AaBoySlo November 6, 2010 at 7:20 am #

      @joelevi Nice video “HTC Desire HD First Boot (without reflections)”. I read so mouch of the sim+SD cover boot and you showed how it works.

Leave a Reply