Trying to preload CSS using a link tag with the "preload" attribute set
Place this inside the Head tag:
<link rel="preload" href="css/layout.css" as="style">
Then add this script at the bottom of the Body tag (although placement shouldn't matter):
<script>
var rels = document.querySelectorAll( 'link[rel="preload"]' );
function loadCSS(){
for( var i = 0; i < rels.length; i++ ){
if( rels[i].as !== undefined && rels[i].as === 'style' ){
rels[i].rel = 'stylesheet';
continue;
}
//IE fix
if( rels[i].as === undefined && /(css)/i.test(rels[i].href)) rels[i].rel = 'stylesheet';
}
}
window.onload = function () {
loadCSS();
};
However, if you trigger the onload event like this:
<link rel="preload" href="css/layout.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
It's not Render-Blocking, but it's not supported in IE. What could be the issue here?