7

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.

bevacqua
  • 47,502
  • 56
  • 171
  • 285

2 Answers2

0

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.

Seth
  • 6,240
  • 3
  • 28
  • 44
  • I'm looking for something more robust / consistent than that – bevacqua Jun 30 '11 at 15:49
  • 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. – Amir Raminfar Jun 30 '11 at 15:54
  • CSS can load asynchronously, so we need to simulate an event `on_CSS_failed`. – Karolis Jun 30 '11 at 16:08
  • 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. – Seth Jul 01 '11 at 00:41
0

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();
});
Community
  • 1
  • 1
Amir Raminfar
  • 33,777
  • 7
  • 93
  • 123