javascript - 页面加载后获取 css 文件

Question

我已经为一个爱好元素关注了 css 文件:

• normalize.css
• main.css
• viewports.css
• bigFile.css

现在 normalize.css , main.css & viewports.css 是整个网站每次访问页面时加载的 3 个文件.但是 bigFile.css 包含大量用于网站内部页面的 css 样式。现在我将这些文件加载​​到主页 index.html 中，如下所示:

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>

我已将 viewports.css 合并到 main.css 中，当前文件大小合适。我无法合并 bigFile.css，因为那时 main.css 的大小会很大，浏览器将等待呈现它。另请注意，我将使用 github 页面将过期 header 设置为几乎 10 分钟，从而使缓存状态对我不利。并假设用户最有可能导航到下一页。

有什么方法可以在页面成功加载后加载 bigfile.css 以便为下一页加载节省一些时间。我不介意使用 js 解决方案，直到它在非 js 站点上有一个优雅的回退(比如在用户实际导航到下一页之前不加载它们)。另外，对于这么小的任务，我不是 jquery 的忠实粉丝。谢谢!

Answer 1

您可以在页面加载后执行一个函数，并将以下代码放入该函数中:

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://example.com/big.css');
}
else {
  var styles = "@import url('http://example.com/big.css');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

附言不要忘记仅在页面加载事件完成时调用该函数，否则会出现相同的性能问题。