我已经为一个爱好元素关注了 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 的忠实粉丝。谢谢!
最佳答案
您可以在页面加载后执行一个函数,并将以下代码放入该函数中:
<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);
}
//]]>
附言不要忘记仅在页面加载事件完成时调用该函数,否则会出现相同的性能问题。
关于javascript - 页面加载后获取 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30752482/