有什么方法可以检测CSS文件何时被完全加载？

Question

我一直在测试很多是插入<脚本>和<链接>标签加载文件懒装载机JavaScript和CSS的。然而，问题是，<link>标签不火onload所以很难他们加载时被发现。我发现这种情况的唯一解决方法是设置display: none;（在CSS文件将被加载）一个哑元上查询该元素时，它已经被设置为显示检查：无。但是，除了丑陋之外，当然只适用于单个CSS文件。

所以我想知道;有没有其他方法来检测CSS文件是否已被加载？

Answer 1

编辑：应该指出的是，自从我原来的答案以来，浏览器对CSS文件onload事件的支持有所改进。尽管如此，我的回答仍然有一些相关性。 Here is a compatibility chart，不知道该来源是多么合法。

好吧，我终于找到了解决方案。

这个人http://tugll.tugraz.at/96784/weblog/9080.html插入链接标签并轮询document.styleSheets [index] .rules，直到它不再未定义（其中索引当然是新插入的文件的索引）。不幸的是他的代码是越野车，只能用于Safari & FF。因此，我修复了这些bug，为Opera和Internet Explorer添加了功能，甚至添加了一个用于添加多个CSS和JS文件的功能，以及一个最终的回调（当所有文件都被加载时）在一个甜美而简单的lazyloader函数中。结果可以在这里找到：

https://github.com/LukasBombach/Lazyloader

Answer 2

编辑：（因为可能的不支持的WebKit）

所以我宁愿建议JQuery LOADER

$("a.button, input.button, button.button").Loader(
{ 
    url: [ 
     'core.css', 
     'theme.css', 
     'button.css' 
    ], 
    success: function() { 
     $(this).button(); 
    } 
}); 

---

您可以在LazyLoad JavaScript库看看。

LazyLoad是一个很小的（精缩仅1541字节），依赖自由 JavaScript库，使用户能够无比轻松 上加载 需求外部JavaScript和 （新的版本）的CSS文件。这是快速和 悄悄加载大型外部 脚本和样式表要么懒惰地 后页面的其余部分已 完成加载或按需 需要。

除了CSS支持，此版本的LazyLoad还增加了支持 的并行加载多个支持它的浏览器中的 资源。 要 并行加载多个资源，只需通过网址 阵列在一个单一的LazyLoad CAL

Answer 3

尝试在某些CSS规则添加到文件的末尾，等待要应用的CSS（检查通过JavaScript）。之后，你可以很确定CSS已经加载。但我没有经验。只是一个快速的想法可能值得一试。

Answer 4

使用脚本管理器，例如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

Answer 5

关于 “检查加载CSS规则”：

如果在您的JS脚本，您可以在头部添加一个包含简单规则的样式标记，如：#loadingCss {display：block; }

比，你只需要添加你所有的CSS文件，如：#loadingCss {display：none; }

在文档的头部，您可以在链接标记前追加样式标记。这样一来，在CSS文件中的CSS规则将是更重要的（相同的选择 - >相同的优先级，最后一个在doc是赢家）。

比在你的JS脚本中，你只需检查#loadingCss可见性。 一旦你知道你的CSS文件被加载，你可以删除样式标签。

对于要加载的下一个CSS文件，可以在head元素的末尾再次添加此样式标签。

这样，只有一个规则，你可以管理所有的CSS文件加载。 此解决方案的唯一问题：您无法一次加载多个CSS文件。但我确信有可能找到一种方法来做到这一点。

但无论如何，我不确定这个解决方案（使用CSS规则来检查加载）是一个非常好的解决方案。也许还有其他方法可以做到这一点。

Answer 6

我想提供一些洞察可能已经改变。

根据Mozilla的<link>文档的最后一段，负载事件可以附加到FF版本9或更高版本以及Chrome 19或更高版本中的链接元素。 IE和Safari没有说明。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Answer 7

值得知道的是现在当前版本的Chrome和Firefox在链接上触发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); 

Answer 8

试试这个：在头 1-预紧CSS

<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"> 

3文件 - 标签</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> 

我测试过o ñ火狐57，铬61，yandex，未在歌剧和测试