Defer Css
A simple function to defer css in your html tag.
Direct Browser Installation
<script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
<script src="https://unpkg.com/defer-css"></script>
<script src="https://bundle.run/defer-css"></script>
From Package Managers
You can include using require
or import
but defer-css does not export anything.
It sets window.deferCss
&& window.deferCssData
Usage
Defined styles are loaded before the link element with defer-css
id in your page
<html>
<head>
<link id="defer-css"/>
</head>
</html>
You can change this to your custom id
<head>
<link href="....">
<link href="....">
<link href="....">
<link id="add-css-here"/>
</head>
Load Css using javascript
deferCss([
'style-1.min.css',
{href: 'style-2.min.css', crossorigin: 'anonymous'}
], 'add-css-here')
Adds the following styles
<link rel="stylesheet" href="style-1.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="style-2.min.css" crossorigin="anonymous">
The values of the styles array can either be a url string
or an object
that will be used to build your link
element
If the object includes an onload
function, it is executed when the css file is loaded.
deferCss([
{
href: 'style-1.min.css',
onload: function() {
}
},
])
Multiple deferCss
Lets say you want to mount css in multiple places.
<head>
<link id="main-css"></main-css>
<link id="other-css"></other-css>
</head>
deferCss(['main-css-1.css', 'main-css-2.css'], 'main-css');
deferCss(['other-css-1.css', 'other-css-2.css'], 'other-css');
The deferCssData
includes details you may need.
deferCssData = {
link: {
total: 1,
loaded: 3
}
}
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Defer Css Test</title>
<script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
<link id="add-css-here">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card shadow" style="margin-top: 20vh">
<div class="card-body text-center">
<h1>Hello, world!</h1>
<h5 class="text-primary">
Bootstrap Loaded with defer-css
</h5>
</div>
</div>
</div>
</div>
</div>
<script>
let scripts = [
'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
{
href: './app.css',
onload: function () {
console.log(this.href + ' Style Loaded!');
console.log(deferCssData);
}
},
];
deferCss(scripts, 'add-css-here');
</script>
</body>
</html>