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 a

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.

Answer 3

You could try a plug-in I wrote specifically for this case.

Not sure about the .load() method of jQuery, it doesn't seem to be cross-browser. Only IE supports onload="" event on the link elements, afaik.

Answer 4

TeaCoder has a good answer to this question over at https://stackoverflow.com/a/35644406/20774.

Basically use the elements onload method and put the logic you want to happen after the style loads there.

It's a nice way to use built in DOM capabilities to do it, but the callback syntax is a little awkward. Here is how I did it with Promises:

const createOnLoadPromise = (htmlElement) =>
  new Promise((resolve) => {
    htmlElement.onload = resolve;
  });
const link1 = document.head.appendChild(createStyleLink(href1));
const link2 = document.head.appendChild(createStyleLink(href2));
await Promise.all([
  createOnLoadPromise(link1),
  createOnLoadPromise(link2),
]);
// do whatever you need to do after the await

Answer 5

Here's a gist I wrote that works perfect in just 47 LOC:

https://gist.github.com/aleclarson/ac6456c75edae9fe9d9b6938142a065b

It uses requestAnimationFrame to check document.styleSheets on every frame until every given URL fragment has been loaded.

Example:

const styles = require('./styles')
const promise = styles.onLoad('foo.css', 'bar.css')
promise.then(() => console.log('Styles loaded!'))

Pure javascript, too!

Answer 6

Try this man: http://forum.jquery.com/topic/loading-stylesheets-on-the-fly

or : http://www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx or Changing a stylesheet using jQuery

Hope it fits the cause :)

Code

var link = $("<link>");
link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: <your CSS file url>
});
$("head").append( link );