javascript - 检测呈现的 CSS 样式

标签 javascript jquery css

我有一个应用程序可以根据用户偏好动态加载 CSS 样式。我使用 requirejs 来加载这些:

require(['css!dir/styles'], function(){ .... });

这很好用,但我不想在所有样式都完全初始化之前显示屏幕。

我已将一个 CSS 类添加到名为 hide-page 的页面主体,然后在回调发生时删除该类。喜欢:

setTimeout(function() { $(document.body).removeClass('hide-page'); }, 100);

但即使设置超时,页面仍然会加载困惑,直到一切都已初始化。我正在考虑执行 setInterval 并检查是否已将特定样式应用于节点,例如:

setInterval(function(){  
    if($(document.body).style('background'') === "#FFFFFF"){
         $(document.body).removeClass('hide-page');
    }
}, 10);

但这有点怪。是否有更好的解决方案来完成此任务?

最佳答案

您没有说明如何隐藏页面内容,但如果您使用 display:none,那可能就是问题所在。

试试 visibility:hidden 代替。这将允许浏览器分配构建页面所需的空间,因此您不应该看到困惑的 FOUC。

关于javascript - 检测呈现的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25145154/

相关文章:

javascript - 使用reduceRight() 进行具有多个参数的函数组合 - JavaScript

javascript - 包装从某个 div 到某个 div 的所有内容

javascript - requestAnimationFrame JavaScript : Constant Frame Rate/Smooth Graphics

javascript - 出于好奇 - 有人可以向我解释 setTimeout() 的奇怪之处吗?

javascript - 滚动时堆叠 div

javascript - 导航栏中的内容是否可以充当按钮而不是链接

javascript - 如果需要,删除 CSS 选择器及其相关属性

html - 复选框和标签对齐

javascript - 如何获取未定义ID和名称的自定义属性的值? - 查询

jquery - 如何解决 jQuery 和 CSS 问题?