有没有办法检测CSS文件何时完全加载？

Question

我一直在测试很多JavaScript和CSS的延迟加载器,它们插入<script>和<link>标签来加载文件.但问题是,<link>标签不会触发,onload因此很难检测到它们何时被加载.我找到的唯一解决方法是display: none;在虚拟元素上设置(在要加载的CSS文件中)并轮询该元素以检查它何时被设置为display:none.但是,除了丑陋之外,当然只适用于单个CSS文件.

所以我在想; 有没有其他方法可以检测是否已加载CSS文件？

Answer 1

编辑:应该注意的是,自我的原始答案以来,浏览器对CSS文件上的onload事件的支持已经有所改进.虽然它没有完全支持,所以我的答案仍然有一些相关性.这是兼容性图表,但不确定源的合法程度.

好的,我终于找到了解决方案.

这个家伙http://tugll.tugraz.at/96784/weblog/9080.html插入链接标签并调查document.styleSheets [index] .rules,直到它不再是未定义的(其中索引当然是新的索引)插入文件).不幸的是他的代码是错误的,只适用于Safari和FF.所以我修复了错误,增加了Opera和Internet Explorer的功能,甚至添加了添加多个CSS和JS文件的功能,以及在甜蜜简单的lazyloader函数中添加1个最终回调(加载所有文件时).结果可以在这里找到:

https://github.com/LukasBombach/Lazyloader

Answer 2

值得注意的是，现在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);