javascript - 检测所有 CSS 规则何时被应用和绘制

Question

在呈现网页的过程中，加载样式表的时间与应用该样式表中的所有规则并完成绘制的时间之间存在延迟。

此延迟取决于样式表的大小和规则的复杂性。

是否有可靠的方法来检查绘画过程何时完成？

注意:我正在寻找一种在动态应用 CSS 规则时也能工作的方法，即当新样式表添加到页面时或当样式被 JavaScript 修改时。所以 document.onload 不是这里的选项。

上下文:我正在开发一个大型单页应用程序，它可以动态加载样式表。为了避免 flash of unstyled content ，我正在显示一个微调器，我需要确切地知道何时隐藏它。

Answer 1

我认为最可靠的解决方案是在 css 加载事件之后添加一个小的延迟。

像这样的伪代码:

myCssTag.onload(function(){
    setTimeout(doStuffAfterRender, 100);
});