1

How do I run a function when a stylesheet finishes loading?

Here is my code..

var d = document,
    css = d.head.appendChild(d.createElement('link'))

css.rel = 'stylesheet';
css.type = 'text/css';
css.href = "https://unpkg.com/tachyons@4.10.0/css/tachyons.css"
TylerH
  • 20,799
  • 66
  • 75
  • 101

2 Answers2

2

According to MDN's <link>: The External Resource Link element,

You can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event:

<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // Do something interesting; the sheet has been loaded
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">

Note: The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • The link does not show onload or load in the Browser compatibility so it may not support old browsers. Neither caniuse.com give result. Found a duplicat with same problem that onload does not work on script elements: https://stackoverflow.com/questions/3078584/link-element-onload –  May 26 '19 at 03:00
  • I accept your answer. See my answer how to extend your code to be cross-browser compatible. –  May 29 '19 at 21:54
  • @PauliSudarshanTerho But if your answer is better, by all means feel free to accept that one. It's about the content of the answers, not the authors. – Mr Lister May 30 '19 at 07:04
  • Yes, we contribute all together for the content of Q&A. –  May 30 '19 at 10:24
  • My answer was based on code I now removed to archives. It becomes forgotten knowledge. I think even "industrial quality production code" can rely on `.onload` nowadays. Look: http://kangax.github.io/jstests/script-element-onload-attribute-support –  Jun 23 '19 at 21:07
  • But uh - now I see the support table was to –  Jun 23 '19 at 21:41
-1

This is a cross-browser solution optimized for modern browsers accepting CSS onload. It works back to 2011 when only Opera and Internet Explorer supported the onload event and onreadystatechange respectively on css. See link below.

var d = document,
    css = d.head.appendChild(d.createElement('link')),
    src = "https://unpkg.com/tachyons@4.10.0/css/tachyons.css"

css.rel = 'stylesheet';
css.type = 'text/css';
css.href = src

Add this after the loader

if (typeof css.onload != 'undefined') css.onload = myFun;
else {
    var img = d.createElement("img");
    img.onerror = function() {
      myFun();
      d.body.removeChild(img);
    }
    d.body.appendChild(img);
    img.src = src;
}

function myFun() {
    /* ..... CONTINUE CODE HERE ..... */
}

The answer is based on this link that say:

What happens behind the scenes is that the browser tries to load the CSS in the img element and, because a stylesheet is not a type of image, the img element throws the onerror event and executes our function. Thankfully, browsers load the entire CSS file before determining its not an image and firing the onerror event.