A function for loading CSS asynchronously [c]2014 @scottjehl, Filament Group, Inc. Licensed MIT
Place the loadCSS function inline in the head of your page (it can also be included in an external JavaScript file if preferable).
Then call it by passing it a stylesheet URL:
<head>
...
<script>
// include loadCSS here...
function loadCSS( href, before, media ){ ... }
// load a file
loadCSS( "path/to/mystylesheet.css" );
</script>
<noscript><link href="path/to/mystylesheet.css" rel="stylesheet"></noscript>
...
</head>before: By default, your stylesheet will be inserted before the firstscripttag in the DOM (which may be the one shown above). This is risky because users' browser extensions can place scripts in theheadof your page and unintentionally change the insertion point for the CSS, which can mess up your intended CSS cascade. If possible we recommend, using the optionalbeforeargument to specify a particular element to use as an insertion point. The stylesheet will be inserted before the element you specify. For example, here's how that can be done by simply applying anidattribute to yourscript.
media: You can optionally pass a string to the media argument to set themedia=""of the stylesheet - the default value isall.callback(deprecated): pass an onnload callback. Instead of using this callback, we recommend binding an onnload handler to the returnedlinkelement by using theonnloadCSSfunction in this repo.
Include onnloadCSS function on your page.
function onnloadCSS( ss, callback ){ ... }
var stylesheet = loadCSS( "path/to/mystylesheet.css" );
onnloadCSS( stylesheet, function() {
console.log( "Stylesheet has asynchronously loaded." );
});We typically use loadCSS to load CSS files that are non-critical to the first rendering of a site. See the EnhanceJS project Readme for examples of how we typically use it to improve page loading performance.
The reason this script is sometimes necessary is because there is no native way in HTML (currently at least) to load and apply a CSS file asynchronously. CSS references that use either link or import will cause browsers to block page rendering by default while their related stylesheet loads.
Both are very much appreciated - especially bug fixes. As for contributions, the goals of this project are to keep things very simple and utilitarian, so if we don't accept a feature addition, it's not necessarily because it's a bad idea. It just may not meet the goals of the project. Thanks!