CSS交付优化：如何推迟CSS加载？
我正在尝试优化按照开发人员的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文件？
如果你不介意使用jQuery，下面是一个简单的代码片段来帮助你。 （否则评论，我会写一个纯粹的例子
function loadStyleSheet(src) { if (document.createStyleSheet){ document.createStyleSheet(src); } else { $("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />")); } };
只需在$(document).ready()或window.onload函数中调用这个函数，就可以了。
对于＃2，你为什么不尝试一下？ 在浏览器中禁用Javascript并查看！
顺便说一下 ，一个简单的谷歌search能给你带来多么惊人的效果; 为查询"post load css" ，这是第四次打击… http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
对Fred提供的函数进行一些修改，使其更加高效且免费。 我在为我的网站生产中使用这个function
// 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); } }
除了弗雷德的回答：
解决scheme使用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>
试试这个片段
作者声称它是由Google的PageSpeed Team发布的
<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>
