How to Load CSS Asynchronously

How can I make my css files asynchronous?

// create a link tag
var link = document.createElement( "link" );
link.rel = "stylesheet";
link.href = "main.css";

And then call a async function that inserts this link tag.

async=true for css link tag

I don't think that will work.

But We can do that using JS:

  var resource = document.createElement('link'); 
  resource.setAttribute("rel", "stylesheet");
  resource.setAttribute("href","path/to/cssfile.css");
  resource.setAttribute("type","text/css");      
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(resource);

I think
That it'll achieve what you're trying to do.

If you don't want javascript have a look at: How to load CSS asynchronously without using JavaScript?

Hope it'll help.

Async load CSS - Firefox

The preload specification is only an Editor's Draft. It isn't standard. It should be considered experimental and not for production use.

Firefox doesn't support it as standard (although you can turn it on in the browser's settings if you want to test its implementation).

---

Related Topics