<link>标签不会触发onload事件，所以很难检测它们何时已经加载完成。我找到的唯一解决方法是在一个虚拟元素上设置display: none;（在要加载的CSS文件中），并轮询该元素以检查它何时被设置为 display:none。但是，这种方法除了丑陋之外，当然只适用于单个CSS文件。编辑：值得注意的是，自我初始回答以来，浏览器对CSS文件的onload事件的支持已经改进。尽管它还没有完全得到支持，但下面的答案仍然有一定的相关性。这里是一个兼容性图表，不确定这个来源的可靠性。
好的，我终于找到了解决方案。
这个人http://tugll.tugraz.at/96784/weblog/9080.html插入链接标签并轮询document.styleSheets[index].rules，直到它不再是undefined（其中index当然是新插入文件的索引）。不幸的是，他的代码有缺陷，只能在Safari和Firefox上运行。因此，我修复了错误，添加了Opera和Internet Explorer的功能，甚至添加了为添加多个CSS和JS文件以及1个最终回调（当所有文件都加载完成时）的特性。结果可以在这里找到：
onload事件。var cssFile = document.createElement("link");
cssFile.setAttribute("rel", "stylesheet");
cssFile.setAttribute("type", "text/css");
// Add event listener
cssFile.onload = function(){ console.log('loaded'); }
cssFile.setAttribute("href", 'pathToYour.css');
document.getElementsByTagName("head")[0].appendChild(cssFile);
编辑：（由于可能不支持 WebKit）
因此，我更愿意推荐JQuery LOADER
$("a.button, input.button, button.button").Loader(
{
url: [
'core.css',
'theme.css',
'button.css'
],
success: function() {
$(this).button();
}
});
你可以查看LazyLoad JavaScript库。
LazyLoad是一个微小的（仅1,541字节压缩），无依赖的JavaScript库，可轻松按需加载外部JavaScript和CSS文件（此版本中新增）。它非常适合在页面余下内容加载完毕后或按需加载时快速、不显眼地加载大型外部脚本和样式表。
除了CSS支持，这个版本的LazyLoad还添加了对在支持此功能的浏览器中并行加载多个资源的支持。要并行加载多个资源，只需在单个LazyLoad调用中传递URL数组即可。
// Gecko和WebKit不支持链接节点上的onload事件，所以我们只能在短暂的延迟后完成并希望一切顺利。 - jAndy这是目前我发现的最简单和最好的解决方案，它完美地工作：
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = css_url;
head.appendChild(link);
var img = document.createElement('img');
document.body.appendChild(img);
img.onerror = img.onload = function() {
img.onerror = img.onload = null;
document.body.removeChild(img);
// do whatever you need to do when css loaded;
};
img.src = css_url;
<link rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
2 - 在页脚预加载js文件
<link rel="preload" as="script" href="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js">
<link rel="preload" as="script" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link rel="preload" as="script" href="script.js">
</body> 标签前添加以下内容。<script>
/** load defer css - js*/
// defer css
var cssAll = document.querySelectorAll('[as="style"]');
for(i = 0; i < cssAll.length; i++){
if(cssAll[i].getAttribute("rel") == "preload"){
cssAll[i].setAttribute("rel", "stylesheet");
}
}
//defer js
var jsAll = document.querySelectorAll('[as="script"]');
if(!window.jQuery)
{
// load jquery lib
var script = document.createElement('script');
script.type = "text/javascript";
script.src = jsAll[0].getAttribute("href");
document.getElementsByTagName('head')[0].appendChild(script);
// load other lib after load jquery
script.onload = function () {
for(i = 1; i < jsAll.length; i++){
var jsNext = document.createElement('script');
jsNext.type = "text/javascript";
jsNext.src = jsAll[i].getAttribute("href");
document.getElementsByTagName('head')[0].appendChild(jsNext);
}
}
}
</script>
我在Firefox 57、Chrome 61和Yandex上进行了测试，但没有在Opera和IE上进行测试。
<link>的文档中的最后一个段落，可以在FF版本9及以上以及Chrome 19及以上的浏览器中将加载事件附加到链接元素。IE和Safari没有被提及。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
Supply 的脚本加载器，代码如下所示：
supply.listen('text/css', function(payload, filename) {
switch(filename) {
case: 'foo.css': {
// do something
break;
}
case: 'baseball.css': {
break;
}
// ...
}
});
supply.files({
stylesheet: [
'foo.css',
'baseball.css'
]
});
参考：SupplyJS
tailwindcss 的 CDN -> <script src="https://cdn.tailwindcss.com"></script>。现在，我把它放在了 body 标签的最后，但是我想先加载 CSS，所以我只需要在 head 标签中添加上述脚本，在 body 加载之前就可以了。