我正在尝试按照开发人员的谷歌文档优化 CSS 交付https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
正如您在内联小 CSS 文件的示例中所见，关键 CSS 内联在头部，原始 small.css 是在页面加载后加载的。
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
我关于这个例子的问题：
如何在页面加载后加载一个大的 css 文件？
如果您不介意使用 jQuery，这里有一个简单的代码片段可以帮助您。（否则评论，我会写一个纯js的例子
function loadStyleSheet(src) {
if (document.createStyleSheet){
document.createStyleSheet(src);
}
else {
$("head").append($("<link rel='stylesheet' href='"+src+" />"));
}
};
只需在您的$(document).ready()orwindow.onload函数中调用它，您就可以开始了。
对于#2，你为什么不试试呢？在浏览器中禁用 Javascript 并查看！
顺便说一句，一个简单的谷歌搜索可以让你走多远真是太神奇了；对于查询"post load css"，这是第四次命中...
http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
对 Fred 提供的函数稍作修改，使其更高效且无需 jQuery。我正在为我的网站在生产中使用此功能
// to defer the loading of stylesheets
// just add it right before the </body> tag
// and before any javaScript file inclusion (for performance)
function loadStyleSheet(src){
if (document.createStyleSheet) document.createStyleSheet(src);
else {
var stylesheet = document.createElement('link');
stylesheet.href = src;
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
}
这是您使用新方法的方式：
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
除了弗雷德的回答：
使用 jQuery & Noscript 的解决方案
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if($("body").size()>0){
if (document.createStyleSheet){
document.createStyleSheet('style.css');
}
else {
$("head").append($("<link rel='stylesheet'
href='style.css'
type='text/css' media='screen' />"));
}
}
});
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
来自http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
使用纯 Javascript 和 Noscript
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript">
var stylesheet = document.createElement('link');
stylesheet.href = 'style.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
试试这个片段
该作者声称，它是由谷歌的团队的PageSpeed公布
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'yourCSSfile.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); };
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>