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.

2 Answers 2

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.

4
  • I'm looking for something more robust / consistent than that
    – bevacqua
    Jun 30, 2011 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. Jun 30, 2011 at 15:54
  • CSS can load asynchronously, so we need to simulate an event on_CSS_failed.
    – Karolis
    Jun 30, 2011 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 1, 2011 at 0: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();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.