A function for loading CSS asynchronously [c]2014 @scottjehl, Filament Group, Inc. Licensed MIT
-
hrefis the optional URL or array of URLs for your CSS file(s). -
beforeoptionally defines the element we'll use as a reference for injecting our<link>By default,beforeuses the first<script>element in the page. However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document. If so, pass a different reference element to thebeforeargument and it'll insert before that instead -
mediais the value for the<link>'s media attribute. Default is "all" or if using the<noscript>option, whatever the original's attribute is.
Place the loadCSS function inline in the head of your page (it can also be included in an external JavaScript file if preferable).
If you call loadCSS() without the first parameter, it will attempt to inject the CSS from any <noscript> elements with the loadCSS class containing <link> elements. Very useful for including a fallback for users without Javascript!
<head>
...
<noscript class="loadCSS">
<link rel="stylesheet" href="myStyles.css" media="all">
</noscript>
<script>
loadCSS();
</script>
...
</head>Call it by passing it a stylesheet URL or array of URLs.
<head>
...
<script>
// load one file
loadCSS( "path/to/mystylesheet.css" );
// load multiple files
loadCSS( ["path/to/moreStyles.css", "path/to/anotherStylesheet.css"] );
</script>
...
</head>By default, your stylesheet will be inserted before the first <script> tag in the DOM (which may be the one shown above). If you need another insert location, use the optional before argument to specify a different sibling element. The stylesheet will be inserted before the element you specify.
<head>
...
<script>
// load one file and insert before the first <link> element
var before = document.getElementsByTagName("link")[0];
loadCSS( "path/to/extraStyles.css", before );
</script>
...
</head>You can optionally pass a string to the media argument to set the media="" of the stylesheet. The default value is "all" or if using the <noscript> option, whatever the original's attribute is.
<head>
...
<script>
// load one file and insert before the first <link> element
var before = document.getElementsByTagName("link")[0];
loadCSS( "path/to/extraStyles.css", before );
// Override `media` attribute from all
loadCSS( "path/to/printStyles.css", before, "print" );
</script>
...
</head>