Change css link and wait for new css to load

Question

I wonder if it is possible to change the stylesheet link of the downloaded document, then wait for the new css to load and then run the appropriate js code

thanks for any suggestions

Answer 1

HTML:

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

the code:

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

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

Answer 2

@ahren is almost fixable. However, using the callback when the css file is completed, loading via dynamic href change on the link element does NOT work on most mobile devices.

Instead, try directly inserting the style into the style element using load .. ultimately supported by most modern browsers, including mobile.

UPDATED enable IE 8- support; NOTE. This requires that you introduce a dummy rule in your css to check the css load (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 3

Try this person: 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 Modifying a stylesheet using jQuery

Hope this matches the reason :)

the code

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

Answer 4

You can try the plugin that I wrote specifically for this case.

Not sure about the .load() method of jQuery , it doesn't look like a cross browser. Only IE supports the onload="" for link elements, afaik.

Answer 5

Here is the gist I wrote that works just fine for 47 LOC:

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

It uses requestAnimationFrame to check document.styleSheets on every frame until every given URL fragment is 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

TeaCoder has a good answer to this question at https://stackoverflow.com/a/1669569/169 .

Basically use the elements onload method and put in the logic you want to implement after loading the style.

This is a good way to use the built-in DOM features for this, but the callback syntax is a bit awkward. Here's 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