change css link and wait till new css is loaded

Question

I wonder whether it's possible to change stylesheet link of the loaded document, then wait till the new css is loaded, and then run appropriate js code

thanks for any suggestions

Answer 1

@ahren had it almost correct. However using a callback when the css file is finished loading via dynamically changing the href on a link element DOES NOT seem to work on most mobile devices.

Instead try directly injecting the style into a style element using load .. ends up being supported by most modern browsers including mobile ones

UPDATED to include support for IE 8- ; NOTE this requires you to inject a dummy rule into your css to verify when the css is loaded (in this case use body {ready:true;})

css

body {ready:true;}
...

html

<style id="your-style-element"></style>

javascript

if (document.createStyleSheet) {

    //Wait for style to be loaded
    var wait = setInterval(function(){
      //Check for the style to be applied to the body
      if($('body').css('ready') === 'true') {
        clearInterval(wait);

        //CSS ready
      }
    }, 300);

    document.createStyleSheet(url);
} else {
    //Dynamically load the css for this doc
    $("#your-style-element").load(url,function(){

       //CSS ready
    });
}

Answer 2

html:

<link id="mystylesheet" href="/path/to/css.css" />

code:

$("#mystylesheet").load(function(){
  //Your javascript
}).attr("href", "/new/path/to/css.css");

This will replace your current CSS, and execute any code within the .load() handler after the new CSS file has been fetched.