检测CSS样式渲染

Detect CSS Style Rendered

本文关键字：样式 CSS 检测      更新时间：2023-09-26

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

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，这可能是问题。

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

相关文章：