How to determine whether a linked resource loads successfully

Question

I'm using the following JavaScript to dynamically load stylesheets:

function set_stylesheet(name) {
    var link = document.getElementById('userstylelink');
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css');
}

Is there any way to determine whether the new CSS file is loaded successfully? If it fails, I'd like to be able to apply a default stylesheet.

This might be a way: Check the response code after fetching the file using AJAX. — pimvdb, Apr 09 '11 at 20:59

score 1 · Answer 1 · edited May 23 '17 at 09:58

1

You might want to see my answer to another similar question here: Detect and log when external JavaScript or CSS resources fail to load

Basically, you can add an onload callback to see if the file was loaded. (If you load via JS of course)

edited May 23 '17 at 09:58

Community

1
1

answered Apr 18 '11 at 21:14

joseeight

904
7
10

score 1 · Answer 2 · answered Apr 29 '11 at 13:16

The simplest way is to check styleSheet.cssText property of the link element after a new href was assigned.

function set_stylesheet(name) { 
  var link = document.getElementById('userstylelink');     
  link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
  if ( link.styleSheet.cssText ) {
    //if not empty string, it was loaded
  }
  else {
    link.href = "default.css";
  }

Alternatively there is "onerror" event which fires when the resource fails to load after href assigned.

score 0 · Answer 3 · answered Apr 09 '11 at 21:40

Ideally, you would load them all at the beginning and then switch between then.

http://www.alistapart.com/articles/alternate/

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

That doesn't really answer the question, but I think this way is preferred.

score 0 · Answer 4 · answered Apr 13 '11 at 19:33

I'd recommend loading via ajax, checking the response as the user pimvbd mentions, but also place a dummy rule at the end of your stylesheet that styles a hidden element with a declaration you can check. For example, give a hidden div border: 987px and check to see if the hidden div's border is in fact 987px. Yes, it introduces a dependency on that style and that element. I've had endless discussions on this with many people, and there's not really a better way (yet). Hopefully s get some attention in browser releases in the near future...

score 0 · Answer 5 · answered Jun 27 '11 at 09:19

There is a solution that requires no javascript or detection of whether the stylesheet loaded.

It seems you could also apply your default style with a built-in style sheet and then have the dynamically loaded stylesheet override the defaults. If the new stylesheet doesn't load, the default is already loaded and in place, nothing further to do. If the new stylesheet does load, it just overrides the default values and shows the new style.

How to determine whether a linked resource loads successfully

5 Answers5