Question

使用vanilla JavaScript检测样式表是否已加载的好方法有哪些？我知道他们没有相同的load事件，图像和脚本会被激活。

通过脚本加载（如在WebPack中）不是一种选择。

Answer 1

这样的事情：

function checkSheetLoaded (urlSpec) {
    var ss = document.styleSheets;

    for (var ii = 0, max = ss.length; ii < max; ii++) {
        if (ss[ii].href.indexOf(urlSpec) >=0)
            return true;
    }
    return false;
}
checkSheetLoaded('foo/bar.css');

基本上遍历样式表集合，寻找字符串匹配。

Answer 2

<link>元素包含load和error个事件，但它们仅适用于Chrome，Firefox和Opera。如果您不需要支持IE或Safari，我认为这就足够了：
```
<link rel="stylesheet" href="some_style.css" onload="anounceReady()">
```
编辑：刚刚使用IE11和IE8进行了测试，支持onload，但onerror不受支持。我手边没有Mac，所以我不知道Safari如何处理它们。
如果您要支持浏览器没有load元素的<link>事件或非常旧的Chrome / Firefox，则会有一个常用的简单易用但工作正常的解决方案。在CSS文件的末尾添加一段探测规则集，并通过JavaScript检测某个探测元素（通常是不可见的）的计算样式。

HTML：
```
<div id="probe"></div>
```
CSS：
```
#probe {
  position: absolute;
  z-index: -1000;
}
```
JavaScript的：
```
var probeStyle = getComputedStyle(document.getElementById('probe'));
probeStyle.zIndex; // expect "-1000" after CSS is loaded
```

检测样式表加载

2 个答案: