Question

我正在开发基于WP的网站并修改子主题。有各种各样的竞争样式表，当页面加载时会导致大量的内容消失和抽搐。我只控制前端 - 有PHP开发人员在后端做了很多工作 - 因此对CSS文件放在加载层次结构中的位置控制有限（如果有的话）。

我想避免这种情况，并且曾想过简单地将CSS隐藏起来，直到CSS被渲染为止，然后在Javascript中优雅地显示它们。

我怎么知道浏览器何时完全'渲染'CSS？我认为jQuery的$（文档）.ready可能不是它 - 因为那只是在加载DOM时，对吧？我可以在代码中访问Modernizr，并且可以对此做一些事情 - 但我不想加载 CSS脚本，甚至不知道它们何时被加载，而是在浏览器时已完成处理所有这些并处理所有冲突的规则。

感谢您的帮助 -

Answer 1

在这种情况下，我通常会设置一个javascript间隔来监视一个特定的元素，以查看它是否符合css规则与样式表设置的匹配。例如，让我说我的样式表有一个愚蠢的规则，如：

p { margin-left: 900px; }

然后我使用jQuery检查左边距：

jQuery(document).ready(function(){
    var stylesheetInterval = setInterval(function(){
        if ( jQuery("p").css("margin-left") == "900px" ) {
            clearInterval( stylesheetInterval );
            // my stylesheet must have loaded. Now I can do whatever else I feel like doing.
        }
    }, 100);
});

如何知道浏览器何时呈现所有CSS（以避免FOUC）

1 个答案: