如何判断异步引入的CSS文件是否已经完全加载完毕-css教程-PHP中文网

node.onload仅IE6–9及旧版Opera支持，Chrome/Firefox/Safari完全忽略；IE中attachEvent('onload')不区分成功与失败；现代方案应轮询node.sheet.cssRules或用PerformanceObserver（限Chrome/Edge）。

如何判断异步引入的css文件是否已经完全加载完毕

用 `node.onload` 判断 CSS 加载完成只对 IE 有效

IE6–9 和部分旧版 Opera 支持直接在节点上监听 onload，但其他浏览器（Chrome、Firefox、Safari）完全忽略该事件。这意味着写成 node.onload = callback 在非 IE 环境下永远不会触发。

更麻烦的是：node.attachEvent('onload', callback) 在 IE 中即使 CSS 返回 404 也会触发——它不区分成功加载和失败，仅表示“尝试结束”。所以不能单靠它做资源可用性判断。

只在明确支持 IE 的老项目中考虑此路径
必须搭配 node.onerror 或 HTTP 状态码校验（但后者需服务端配合）
现代项目应彻底放弃 attachEvent 方案

轮询 `node.sheet` 和 `node.sheet.cssRules` 是通用方案

主流浏览器都支持通过 link 元素的 sheet 属性访问其 CSSStyleSheet 对象，但该对象是否可读、是否含规则，取决于加载状态。轮询是目前最可靠、无依赖的检测方式。

关键逻辑分两步：

先检查 node.sheet 是否存在（WebKit/Chrome/Safari 通常最早暴露）
再尝试读取 node.sheet.cssRules（Firefox 需要，但可能抛 NS_ERROR_DOM_SECURITY_ERR，code 为 1000 时即视为就绪）

示例片段（精简版）：

function poll(node, callback) {
  if (node.sheet) {
    try {
      if (node.sheet.cssRules || node.sheet.cssText) {
        setTimeout(callback, 1);
        return;
      }
    } catch (e) {
      if (e.code === 1000) {
        setTimeout(callback, 1);
        return;
      }
    }
  }
  setTimeout(() => poll(node, callback), 10);
}

`document.readyState === 'complete'` 不能替代 CSS 加载检测

document.readyState === 'complete' 表示 HTML、JS、图片、iframe 等所有资源都已加载完毕，但它**不保证 CSS 已解析并生效**。尤其当 CSS 文件体积大、网络慢、或被 CDN 缓存穿透延迟时，complete 触发后仍可能出现样式未应用的“闪屏”。