在页面加载后获取css文件 [英] fetch css file after page loads

问题描述

我有一个爱好项目的css文件：

• normalize.css
• main.css


• viewports.css


• bigFile.css

现在 normalize.css ， main.css & viewports.css 是在整个网站的每次访问中加载的3个文件。然而 bigFile.css 包含很多用于网站内部页面的CSS样式。现在，我在主页 index.html 内加载这些文件，如下所示：

 < link rel =stylesheethref =css / normalize.min.css> 
< link rel =stylesheethref =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这么小的任务的忠实粉丝。感谢！

解决方案

您可以在页面加载完成后执行一个函数，
$ b

 < 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）; 
} 
 //]]> 
  

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

I've following css files for a hobby project:

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

Now normalize.css , main.css & viewports.css are the 3 files that are loaded on every page visit throughout the website. However bigFile.css contains a lots of css styles that are used in internal pages of the website. For now I'm loading these files inside homepage index.html like this :

<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'>

I've merged viewports.css inside main.css and current file size is good. I cannot merge bigFile.css since then the size of main.css will be large and browser will wait to render it. Also note I'll be using github pages which sets expire headers to almost like 10 minutes , thus making caching state bad for me. And assume user is most likely navigate to next page.

Is there any way I could load bigfile.css after the page has loaded successfully so that it saves some time for next page loads. I don't mind using js solution till it has a gracefull fallback on non-js sites (like not loading them till user actually navigates to next page). Also I'm not a big fan of jquery for such a small task. Thanks!

解决方案

You can execute a function after page has loaded and put below code inside that function :

<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. Do not forget to call the function only when the page load event completed otherwise same performance issue will be there.

这篇关于在页面加载后获取css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！