CSS传递优化：如何推迟CSS加载？

一尘不染

CSS传递优化：如何推迟CSS加载？

css

我正在尝试根据Google文档为开发人员 优化CSS交付

在内联一个小的CSS文件的示例中可以看到，关键的CSS内联在头部， 原始的small.css在页面加载后加载 。

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

我对这个例子的疑问：

页面加载后如何加载大型CSS文件？

阅读 1017

2020-05-16

共1个答案

一尘不染

如果您不介意使用jQuery，这里有一个简单的代码段可以帮助您。（否则，我将写一个纯js示例

function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

只需在您的$(document).ready()或window.onload函数中调用它，就可以了。

对于＃2，为什么不尝试呢？在浏览器中禁用Java脚本，看看吧！

顺便说一句 ，一个简单的google搜索能带给您多大的惊喜。对于查询"post load css"，这是第四次点击…

2020-05-16