检测样式表加载答案

【问题标题】：Detect style sheet load检测样式表加载
【发布时间】：2015-02-08 03:17:54
【问题描述】：

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

不能通过脚本加载（如在 WebPack 中）。

【问题讨论】：

标签： css web browser

【解决方案1】：

<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】：

类似这样的：

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');

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

【讨论】：

这不检查样式表链接标签是否插入到文档中吗？如果没有下载样式表，这不是可能的吗？
不，如果它只是一个链接，它就不会出现在 Stylesheets 集合中。该集合指的是规则集，而不是元素列表。
我读到这个方法在任何地方都有效，但在 Firefox 中。然而，那已经是 2 岁了，所以也许它现在可以工作了。（Firefox 现在实际上也支持加载事件。）感谢您的提示。
我在这里看到一个问题 — indexOf 失败时返回 -1，而不是 false
对不起，每天使用多种语言的陷阱之一。你最终会把一个人的特质带到下一个人身上。为此，我通常在 JS 中使用按位不 (!!~(ss.href.indexOf(urlSpec))。:)