Question

我已经关注了一个爱好项目的css文件：

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

现在normalize.css，main.css＆amp; 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页面将过期标题设置为差不多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);
}
//]]>

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

页面加载后获取css文件

1 个答案: