页面加载的css文件怎么找,javascript-页面加载后获取css文件

我正在关注一个爱好项目的css文件：

> normalize.css

> main.css

> viewports.css

> bigFile.css

现在normalize.css,main.css& viewports.css是网站上每次访问页面时加载的3个文件.但是bigFile.css包含许多网站内部页面中使用的CSS样式.现在,我将这些文件加载​​到主页index.html中,如下所示：

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

有什么方法可以在页面成功加载后加载bigfile.css,从而节省了下一页加载的时间.我不介意使用js解决方案,直到它在非js网站上全面恢复(例如,直到用户实际导航到下一页才加载它们).另外,对于这样的小任务,我也不喜欢jquery.谢谢！

解决方法:

您可以在页面加载完毕并在该函数内的代码下方放置以下代码后执行一个函数：

//

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);

}

//]]>

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

标签：css3,css,html,javascript

来源： https://codeday.me/bug/20191028/1950804.html