Javascript 检测呈现的CSS样式

Javascript 检测呈现的CSS样式,javascript,jquery,css,Javascript,Jquery,Css,我有一个基于用户偏好动态加载CSS样式的应用程序。我使用requirejs加载以下内容: require(['css!dir/styles'], function(){ .... }); 这很好,但是我不想在所有样式完全初始化之前显示屏幕 我在页面主体中添加了一个名为hide page的CSS类,然后在回调发生时删除该类。比如: setTimeout(function() { $(document.body).removeClass('hide-page'); }, 100); 但即使使用s

我有一个基于用户偏好动态加载CSS样式的应用程序。我使用requirejs加载以下内容:

require(['css!dir/styles'], function(){ .... });
这很好,但是我不想在所有样式完全初始化之前显示屏幕

我在页面主体中添加了一个名为
hide page
的CSS类,然后在回调发生时删除该类。比如:

setTimeout(function() { $(document.body).removeClass('hide-page'); }, 100);
但即使使用settimeout,页面仍然会加载混乱,直到所有内容都初始化。我正在考虑执行setInterval并检查是否已将特定样式应用于节点,如:

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

但这有点骇人。有更好的解决方案吗?

您没有说明如何隐藏页面内容,但如果您使用的是
display:none
,则可能会出现问题


改为尝试
可见性:隐藏。这将允许浏览器分配构建页面所需的空间,因此您不应该看到混乱的FOUC。

听起来您的问题完全源于另一点,即您的代码逻辑正在使您的站点变慢。你能提供一个真实的例子或更多的背景吗?我认为这是一个很好的答案。您可能需要进一步解释
可见性:隐藏
显示:无
如何以不同方式影响布局,以便更好地帮助找到此问题的未来访问者。正确,
ng hide
正在做
显示:无