Chrome扩展:如何摆脱FOUC？
问题的实质是：
有一个页面，我需要修改浏览器扩展的内容，可以使用jQuery。
尝试了$(document).ready()，但内容仍然显示了一小段时间(FOUC)。我无法在服务器上更改页面样式。
我正在使用kango框架来构建扩展。
回答 2
Stack Overflow用户
发布于 2013-02-02 00:41:45
我建议您结合使用CSS和JavaScript。我在我正在构建的一个网站上使用jQueryUI时也遇到了同样的问题，我发现很多这样的解决方案都会让那些没有JavaScript的人无法访问这些内容。
所以，这是我所做的：
CSS：
.flash #wrapper {
display: none;
}这将仅当<div id="wrapper">是flash类的后代时才将其设置为隐藏。因此，为了防止对那些没有JavaScript的人隐藏它，我在<html>元素中添加了flash类。因此，只有当最终用户启用了JavaScript时，它才能在物理上隐藏，否则他们至少可以通过未设置样式的内容进行访问。
JavaScript：
$('html').addClass('flash');
$(document).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content styled */
$(#wrapper).show();
});根据你的页面加载时间，你可能会看到一些闪光，但它不会是一个没有样式的内容，这是相当丑陋的闪光。在我的例子中，我有一个jQueryUI菜单项，它首先显示普通的<ul>元素，然后显示menuUI项，并且使用jQuery调整<div>元素的大小，使每个<div>列的高度相等，但它会先显示不同的高度。这解决了这个问题，同时仍然为非JavaScript浏览器提供可访问性。
Stack Overflow用户
发布于 2013-01-30 19:46:08
只使用ECMAscript，你不能可靠地避免它。如果您等待DOMContentLoaded事件，您会看到like no shot，因为此时DOM几乎已经呈现并显示(这是您在短时间内看到的)。
你最好的办法就是尽快修改CSS。如果样式表定义在DOM呈现之前加载，并且您应该像这样设置
body {
display: none;
}你什么也看不到。你可以试着这样做
<body>
<script>
document.body.style.display = 'none';
</script>
<!-- more html -->
</body>如果这对您来说是任何可行/可用的解决方案。
https://stackoverflow.com/questions/14603127
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号