Question

我试图以下列方式预加载一些CSS

头标内：

<link rel="preload" href="css/layout.css" as="style">

身体标记底部的脚本（不要认为无论如何都放在哪里......）

<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();
};

但是，如果我以下列方式调用onload事件：

<link rel="preload" href="css/layout.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

这不是渲染阻止，但IE不支持。

我缺少什么？

Answer 1

//On window load
window.onload = function () 
{
    //Get the link tag using the ID
    var $style = document.getElementById('mycss');
    
    
    //Now you can add, remove or change its attribute, 
    $style.rel='stylesheet';
    
    //$style.href='';
};

<html>
    <head>
         <!-- Put a unique ID to your link tag -->
         <link rel="preload" href="css/layout.css" as="style" id="mycss" />
    </head>
<body>
</body>
</html>

预加载CSS仍会导致渲染阻塞源

1 个答案: