javascript - 如何知道何时所有CSS由浏览器呈现(避免FOUC)

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

                        5年前关闭。



我正在一个基于WP的网站上工作，并且正在修改儿童主题。样式表有许多竞争的层，这会导致页面加载时大量内容的混乱。我只有前端的控制权-有PHP开发人员在后端做大量工作-因此对CSS文件在加载层次结构中的放置位置的控制有限（如果有的话）。

我想避免这种情况，并曾考虑过简单地将CSS隐藏在有问题的元素上，直到呈现CSS，然后以Javascript优雅地显示它们。

我怎么知道浏览器何时完全“渲染” CSS？我认为jQuery的$ {document）.ready可能不是-那是在加载DOM的时候，对吗？我可以在代码中访问Modernizr，并且可以执行某些操作-但我不想加载CSS脚本，甚至不想知道何时加载CSS脚本，但是不想在浏览器完成对所有脚本的处理后解决所有冲突的规则。

谢谢你的帮助 -

最佳答案

在这种情况下，我通常设置一个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);
});

关于javascript - 如何知道何时所有CSS由浏览器呈现(避免FOUC)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26146393/

上一篇：html - 100% 时 div 元素的高度与父元素的高度不匹配

下一篇：javascript - 使用 javascript 更改 css 是内联的，但不是来自标题

相关文章：

jquery - 如何让 Isotope 与动态 DOM 节点一起工作？

html - z-index 在 IE 中工作，但在 Edge 中不起作用

javascript - underscore.js 中的 unescape() 函数不起作用

javascript - meteorjs - 像 django 这样的管理员用户

javascript - 在HTML中加载页面3秒后加载引导警报

javascript - 在保存时编译一些 CoffeeScript 文件

javascript - 如何在不刷新的情况下通知数据发生变化？

javascript - Laravel 与 Jquery - Ajax 抛出 500 错误 - 服务器端的问题

javascript - 响应高度的视频纵横比可能吗？

css - 如何使用 CSS 创建向下箭头？