动态加载CSS文件后，如何检测样式实际生效的时机？

1. 监听link元素的load事件 #

这是最实用的主流方案，link元素加载并解析完成后会触发load事件，此时CSS样式已完全生效。直接修改你的代码即可：

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('link');
style.href = "fonts.css";
style.type = 'text/css';
style.rel = 'stylesheet';

// 监听加载完成事件
style.addEventListener('load', function() {
  // 在这里执行你需要的函数
  yourFunction();
});

// 可选：监听加载失败的情况
style.addEventListener('error', function() {
  console.log('fonts.css加载失败');
});

head.append(style);

Chrome、Firefox、Edge、Safari等主流浏览器都支持这个事件，兼容性足够。

2. 针对字体CSS的特殊处理 #

如果你的fonts.css里包含@font-face定义字体，CSS加载完成不代表字体已经渲染到页面上。这种情况可以用FontFaceSet API确认字体加载完成：

style.addEventListener('load', function() {
  // 等待所有字体加载就绪
  document.fonts.ready.then(function() {
    // 检查目标字体是否可用（替换成你的字体名称）
    if (document.fonts.check('16px YourFontFamilyName')) {
      // 字体渲染完成，样式真正生效
      yourFunction();
    }
  });
});

3. 旧浏览器兜底方案（IE9及以下） #

如果需要兼容非常老旧的浏览器，load事件可能不支持，那就用轮询的方式：
首先在fonts.css里添加一个唯一的测试样式：

.css-loaded-marker {
  display: none;
}

然后在JS里定时检测这个样式是否生效：

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('link');
style.href = "fonts.css";
style.type = 'text/css';
style.rel = 'stylesheet';
head.append(style);

// 每隔50ms检测一次
var checkTimer = setInterval(function() {
  var testDiv = document.createElement('div');
  testDiv.className = 'css-loaded-marker';
  document.body.appendChild(testDiv);
  
  // 获取元素的计算样式
  var computedDisplay = window.getComputedStyle(testDiv).display;
  document.body.removeChild(testDiv);
  
  if (computedDisplay === 'none') {
    clearInterval(checkTimer);
    yourFunction();
  }
}, 50);

这种方法虽然不够优雅，但能覆盖极端老旧的运行环境。

内容的提问来源于stack exchange，提问作者Paolo Benvenuto