检测何时应用并绘制了所有CSS规则

时间:2017-08-31 14:25:24

标签: javascript html css browser paint

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

此延迟取决于样式表的大小以及规则的复杂程度。

是否有可靠的方法来检查涂装过程何时完成?

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

背景信息:我正在开发一个大型单页应用,可以动态加载样式表。为了避免闪烁无格式的内容,我展示了一个微调器,我需要知道何时隐藏它。

1 个答案:

答案 0 :(得分:0)

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

像这样的伪代码:

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