Raf*_*shi 59 html javascript css deferred-loading google-pagespeed
我正在尝试针对开发人员的Google文档优化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文件？
Fre*_*red 47
如果你不介意使用jQuery,这里有一个简单的代码片段来帮助你.(否则评论,我会写一个纯js的例子
function loadStyleSheet(src) {
if (document.createStyleSheet){
document.createStyleSheet(src);
}
else {
$("head").append($("<link rel='stylesheet' href='"+src+" />"));
}
};
只需在你$(document).ready()或你的window.onload功能中调用它,你就可以了.
对于#2,你为什么不试试呢？在浏览器中禁用Javascript并查看!
顺便说一下,一个简单的谷歌搜索能带给你的程度是多么惊人; 对于查询"post load css",这是第四次打击......
http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
Sal*_*ual 34
对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);
}
}
小智 13
有一种简单的方法可以仅使用链接标签异步加载 CSS
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
media="print"告诉浏览器异步加载用于打印的 CSS。更多详细信息请参见此处
Raf*_*shi 10
除了弗雷德的回答:
使用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>
这是您使用新方法的方式：
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
警告：body{background-image: url("http://example.com/image.jpg");}在 css 文件中会使你的 css 文件仍然阻塞渲染。
如果您尝试了上述所有解决方案，但仍然收到来自 PageSpeed Insights 的渲染阻止警告，那么您的 css 文件中可能包含此样式规则。经过数小时的测试，结果证明是这条规则使我的所有css 都在 PageSpeed 洞察中被标记为阻止渲染的资源。我发现之前已经讨论过同样的问题。
我不知道为什么body{background-image: url(...)对所有 css 文件都这样做！，尽管我在文件中为按钮、图标等提供了不同的图像资源。
我通过从.css文件中移动此规则并将其放入内联样式来解决此问题。不幸的是，你将不得不打破你的 css 计划并将规则放在你所有的布局 HTML 文件中，而不是在所有 HTML 布局中导入的 1 个 css 文件中，但 PageSpeed 见解中的 90 年代和绿色值得它。