检测呈现的CSS样式

Question

我有一个应用程序根据用户首选项加载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);

但那就是hackey。有没有更好的解决方案，任何人都必须实现这一目标？

Answer 1

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

请尝试使用visibility:hidden。这将允许浏览器分配构建页面所需的空间，因此您不应该看到混乱的FOUC。