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

标签 javascript html css browser paint

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

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

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

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

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

最佳答案

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

像这样的伪代码:

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

关于javascript - 检测所有 CSS 规则何时被应用和绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45983893/

相关文章:

html - Z-index 不适用于 css 形状内的图像

html - 父DIV中的高度不同

javascript - 我在我的index.js文件里定义了三个数组,但是我的index.ejs文件只能识别第一个?

javascript - 获取委托(delegate)选择器的索引

javascript - 通过从 json 读取数据来更改路径类

html - 使用 HTML5 播放 HLS

javascript - 带 setTimeout 的双键陷阱 ctrl

css - 具有不同边距颜色和居中内容的网页

javascript - 如何隐藏一个页面上的按钮并在不同页面上显示该按钮?

javascript - 羊驼 - 在必填字段上将 '★' 替换为 '*'