Google CDN Hosted jQuery UI CSS with local fallback?

Question

I already have the following for the JS files:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write(unescape("%3Cscript src='/app_shared/script/jquery-1.6.1.min.js' type='text/javascript'%3E%3C/script%3E"))</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">!window.jQuery.ui && document.write(unescape("%3Cscript src='/app_shared/script/jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E"))</script>

How can I go for something similar for a theme? I can download it from the cdn like this:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

But how can I detect if the file was downloaded, to reference a local copy on failure? I know how to add the local copy programatically with jQuery, but I don't know how to check whether the CSS download succeded. Also, are <link> tag downloads blocking, or are they async? That'd be a problem, too.

Rockaway

Answer 1

You could do a style check where a font should be a particular family and then check against that family name. If the name is not what you expect then load the local copy.

Ubiety

I'm looking for something more robust / consistent than that – Rockaway

There really isn't any other way. You have to wait until the css loads and then check for some style. Not that element.style won't work. There is another one you need when says the style that was loaded from an external file. – Campaign

CSS can load asynchronously, so we need to simulate an event on_CSS_failed. – Dunc

They other way to do it would be to load the CSS file in with the JS and then use an onError event to see if it loads or not. The downside is you would get a flicker of non styled content until the file loaded...much like using a JS based web font service. – Ubiety

Answer 2

You can also try something like Get a CSS value from external style sheet with Javascript/jQuery

<style>
p {color: blue}
</style>

$(document).ready(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    alert($p.css("color"));
    $p.remove();
});

Campaign