How to run a function when CSS stylesheet finishes loading

Question

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/[email protected]/css/tachyons.css"

Declamation

Answer 1

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.}

Slander

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://mcmap.net/q/341776/-link-element-onload – Declamation

I accept your answer. See my answer how to extend your code to be cross-browser compatible. – Declamation

@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. – Slander

Yes, we contribute all together for the content of Q&A. – Declamation

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: kangax.github.io/jstests/… – Declamation

But uh - now I see the support table was to <script> and not <link>. It works back to 2011 with <link> and IE10 came 2012 that is my reference to be backwards compatible with my code. ES5 was already out. So no worry - this is still a safe solution even for CSS. – Declamation

Answer 2

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/[email protected]/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.

Declamation