2

Best practice dictates that my website that is heavily reliant on Jquery, and JQuery UI, which it sources from Google's CDN, should have a fallback in case that CDN fails for some reason.

My question is, how do I go about doing this for a given theme? If it matters, I am using the Redmond theme.

Currently I plan to use code something like:

 if(!jquery){//load local file instead; }
    else if(!jquery.ui){//load local file instead; }

But I'd like a fallback for the theme file being loaded from Google too, if possible.

Any ideas? :)

Callum M
  • 1,635
  • 19
  • 27
  • Isn't it possible to publishing jquery, jquery ui and theme file in your server? – hkutluay May 09 '12 at 16:30
  • @hkutluay Yes it is possible, but by serving common assets from Google's CDN (the most popular, afaik) it can be cached so many users will already have it and won't have to download it. The downside is relying on the CDN, which is what I'm trying to deal with for the theme file. – Callum M May 09 '12 at 16:41

3 Answers3

1
if (typeof jQuery=='undefined') { //check if jQuery is loaded
    console.log('no jQuery');
}else{ //if jQuery loaded
    if (typeof jQuery.ui=='undefined') { //check if jQuery UI is loaded
        console.log('no jQuery UI');
    }
}

Here's a FIDDLE, toggle the libraries on the left and check the console.

You'll need an interval and a timeout to give the libraries a reasonable time to load. If not loaded within a couple of seconds, include your own files instead, or replace the src attribute to use another CDN. Have a look at Google's analytics code, or Facebook's plugins etc. to see how you insert a new script tag in the head section.

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Thankyou, but this isn't quite what I was looking for. I'm looking for a method to test for a custom jquery ui theme being loaded. I'm aware of methods for jQuery and jQuery UI, but I also currently rely on a CDN for the theme, which isn't ideal without a fallback. – Callum M May 09 '12 at 16:45
  • Check the theme's source code, find some function with a unique name, and check if it's defined, just like above with typeof. – adeneo May 09 '12 at 17:00
  • Sorry if I haven't been clear - jQuery UI themes are just .css files. Sorry, I should have specified that. Thankyou though! :) – Callum M May 10 '12 at 21:16
  • Then just check for a specific style – adeneo May 10 '12 at 22:32
1

Use http://yepnopejs.com/

It is a resource loader and works great with CSS files as well. Give that a try, the example is present on their webpage.

Also this is a repeat question from:

How to fallback to local stylesheet (not script) if CDN fails

Community
  • 1
  • 1
Prateek Jain
  • 46
  • 4
  • This is great, thankyou very much. My theme technically is a CSS file, so this should be a good choice. Apologies for the repeat question, didn't spot that one searching. Cheers for the answer! :) – Callum M May 09 '12 at 16:52
0

You can include the CDN reference, test for a key object, and if it’s undefined then :

1) Host the files (scripts and styles) on your server and fallback to these files if the CDN fails to load your files.

2) ** recommended ** Use an existing CDN (amazon's is easy to use) and fallback to those files if the google cdn doesn't load properly.

BentOnCoding
  • 27,307
  • 14
  • 64
  • 92
  • This is basically what I intend to do. I'm just not sure how to test for my theme failing. That might be a good idea to use a fallback CDN instead of local, since both are very unlikely to be down together and there's still a chance of it being cached. But I'm still not sure how to test for my theme being loaded. – Callum M May 09 '12 at 16:43
  • http://stackoverflow.com/questions/3794128/how-to-check-if-an-external-css-file-is-loaded-using-javascript – BentOnCoding May 09 '12 at 16:46
  • That question addresses how to detect css files. – BentOnCoding May 09 '12 at 16:47