src/index.dist.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Preload Onload Polyfill</title>
<style type="text/css">
body {
font-family: Arial, "Open Sans", sans-serif;
font-size: 16px;
color: #012345;
background-color: #abcdef;
outline: 1em solid #012345;
}
header,
main {
display: block;
padding: 1em 2em;
}
</style>
<link
href="css/style.css"
rel="preload"
as="style"
type="text/css">
<script src="../dist/preload.onload.polyfill.min.js" type="text/javascript"></script>
<noscript>
<link rel="stylesheet" href="css/style.css" type="text/css">
</noscript>
</head>
<body>
<header>
<h1>Preload Onload Polyfill</h1>
<h2>A <code><link rel="preload"></code> Polyfill. Call the onload event, also in unsupported Browser.</h2>
</header>
<main>
<article>
<h2>Example:</h2>
<h3>Inline (critical) Style</h3>
<pre>
<code>
body {
font-family: Arial, "Open Sans", sans-serif;
font-size: 16px;
color: #012345;
background-color: #abcdef;
outline: 1em solid #012345;
}
header,
main {
display: block;
padding: 1em 2em;
}
</code>
</pre>
<h3>Injected preload style <code>css/style.css</code></h3>
<pre>
<code>
<link
href="css/style.css"
rel="preload"
as="style"
onload='this.rel="stylesheet"'
type="text/css">
</code>
</pre>
<pre>
<code>
body {
color: #abcdef;
background-color: #012345;
transition: all 4s ease-in;
outline: 1em solid #abcdef;
}
...
</code>
</pre>
<p>Note: this style is also injected as fallback within the <code><noscript></code> element.</p>
<pre>
<code>
<noscript>
<link rel="stylesheet" href="css/style.css" type="text/css">
</noscript>
</code>
</pre>
<h2>Support</h2>
<p>The Polyfill enable <code><link rel="preload"></code> support (e.g. for stylesheets) in browser (e.g. Firefox or IE11) which currently not support this <code><link></code> attribute.</p>
<p>Tested with MSIE 11, Edge 17, Firefox 60 and Chrome 72.</p>
</article>
</main>
</body>
</html>