Categories
JavaScript Answers

How to defer CSS loading with JavaScript?

Spread the love

Sometimes, we want to defer CSS loading with JavaScript.

In this article, we’ll look at how to defer CSS loading with JavaScript.

How to defer CSS loading with JavaScript?

To defer CSS loading with JavaScript, we can create a link element with JavaScript.

For instance, we write

const stylesheet = document.createElement("link");
stylesheet.href = "style.css";
stylesheet.rel = "stylesheet";
stylesheet.type = "text/css";
document.head.appendChild(stylesheet);

to create a link element with createElement.

Then we set the href, rel and type properties to set the attributes with the same name.

Then we call document.head.appendChild with stylesheet to append the link element as the last child of the head element.

Conclusion

To defer CSS loading with JavaScript, we can create a link element with JavaScript.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *