How to load CSS asynchronously with JavaScript?

Spread the love

Sometimes, we want to load CSS asynchronously with JavaScript.

In this article, we’ll look at how to load CSS asynchronously with JavaScript.

To load CSS asynchronously with JavaScript, we set its mediat attribute to 'all' after the stylesheet is loaded.

For instance, we write

<link
  rel="stylesheet"
  href="style.css"
  media="print"
  onload="this.media = 'all'"
/>

to add a link element that has the media attribute initially set to print.

Then we set onload to this.media = 'all' to set the media attribute to all once the stylesheet is loaded.

To load CSS asynchronously with JavaScript, we set its mediat attribute to 'all' after the stylesheet is loaded.