Ste*_*fan 79
使用css样式初始隐藏某些页面元素,然后使用javascript将样式更改回页面加载后可见的问题是,没有启用javascript的人永远不会看到这些元素.所以这是一个不会优雅降级的解决方案.
因此,更好的方法是使用javascript初始隐藏以及在页面加载后重新显示这些元素.使用jQuery,我们可能会想要做这样的事情:
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
但是,如果您的页面非常大且包含大量元素,那么此代码将不会很快应用(文档正文不会很快就绪),您可能仍会看到FOUC.但是,即使在文档准备就绪之前,只要脚本遇到脚本,我们就可以隐藏一个元素:HTML标记.所以我们可以这样做:
<html>
<head>
<!-- Other stuff like title and meta tags go here -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');
$(document).ready(function() { // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
$('html').show(); // EDIT: Can also use $('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
请注意,jQuery addClass()方法在.ready()(或更好的.on('load'))方法的**之外调用.
- 更新:刚试过这种方法.当前版本的jQuery需要使用`removeClass`(我建议)而不是`show`(如原始答案)来完成 - 否则html将永远不会显示.我相信jQuery的show()现在明确地从css样式中查找并恢复任何显示状态,以避免干扰样式.因此,有必要实际删除"隐藏"类. (5认同)
- 对我来说,用'$('html')替换`$('html').show()'`似乎更简洁.removeClass('hidden');`.这使得ready函数更加清除了`addClass`. (3认同)
- 如果只有 CSS 的解决方案有 `<style>html { display: none; }</style>` 在 `<head>` 中，然后你的真实风格就在 `</body>` 之前？ (3认同)
- 我们不应该寻找 load 事件而不是 ready 吗？通过加载，我们知道 CSS 将准备就绪。准备好后，我们不知道 CSS 会准备好。 (2认同)
Ada*_*ner 22
仅限CSS的解决方案:
<html>
<head>
<style>
html {
display: none;
}
</style>
...
</head>
<body>
...
<link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
</body>
</html>
当浏览器解析HTML文件时:
- 它要做的第一件事是隐藏
<html>. - 它最后要做的是加载样式,然后显示应用了样式的所有内容.
与使用JavaScript的解决方案相比,它的优势在于,即使禁用了JavaScript,它也能为用户工作.
注意:你可以放在<link>里面<body>.我确实认为这是一个缺点,因为它违反了惯例.这将是很好,如果有一个defer为属性<link>像有对<script>的,因为这将使我们能够把它的<head>,仍然实现我们的目标.
- 知道`display:none`也会隐藏背景图像或颜色很有用.由于我的网站有一个黑暗的主题,它会闪烁白色.使用`visibility:hidden`对我来说更好. (3认同)
Law*_*Dol 18
一个不依赖于jQuery的解决方案,它可以在所有当前浏览器上运行,在旧浏览器上不执行任何操作,在头标记中包含以下内容:
<head>
...
<style type="text/css">
.fouc-fix { display:none; }
</style>
<script type="text/javascript">
try {
var elm=document.getElementsByTagName("html")[0];
var old=elm.class || "";
elm.class=old+" fouc-fix";
document.addEventListener("DOMContentLoaded",function(event) {
elm.class=old;
});
}
catch(thr) {
}
</script>
</head>
感谢@justastudent,我尝试了设置elm.style.display="none";,它似乎按照需要工作,至少在当前的Firefox Quantum中.所以这是一个更紧凑的解决方案,到目前为止,我发现最简单的方法是有效的.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
- 事实上,为什么首先使用单独的CSS？为什么不做`elm.style.display ='none';`然后用`elm.style.removeProperty('display')撤消它;`？ (2认同)
Jef*_*eff 16
这是对我有用的，不需要javascript，它非常适合包含许多元素和大量CSS的页面：
首先，增加一个专门<STYLE>设置的<HTML>，在你的HTML，如顶部，能见度“隐藏”和不透明度为“0”的标签，在年初<HEAD>元素，例如，在你的HTML加顶：
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
然后，在最后一个.css样式表文件的末尾，将可见性和不透明度样式分别设置为“ visible”和“ 1”：
html {
visibility: visible;
opacity: 1;
}
如果您已经具有'html'标记的现有样式块，则将整个'html'样式移至最后一个.css文件的末尾，并如上所述添加'visibility'和'opacity'标记。
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0
- 这确实应该是公认的正确答案。如果禁用了JS或出现JS错误，则不显示任何页面是一个坏主意，这很容易访问。 (4认同)
小智 9
我为避免FOUC所做的是:
将正文部分设置为:
<script>编写
<script>JavaScript函数:<script>
使用这种方法,我的网页正文将保持隐藏,直到加载完整页面和CSS文件.加载完所有内容后,onload事件会使主体可见.因此,Web浏览器保持空白,直到屏幕上弹出所有内容为止.
这是一个简单的解决方案,但到目前为止它正在运作.
- 如果观众没有启用JavaScript,那就不好了,因为他们不会看到任何东西. (69认同)
- -1表示一个解决方案,它将为没有启用javascript的用户显示NOTHING,或者是在不支持javascript的屏幕阅读器上,或者是阻止javascript的公司防火墙后面的用户.谷歌搜索"消除不需要的内容的闪光"将显示许多没有这个缺陷的方法.例如,斯特凡的回答(一年后)更加安全. (23认同)
- 你真的应该添加`<noscript> <style> body {visibility:visible; 最后的</ style> </ noscript>`这样该网站也可以使用JS禁用. (23认同)
- 公司防火墙阻止 Javascript？换公司的理由... (10认同)
- 在我看来，杰夫的以下答案是正确的答案。它不依赖于 javascript 并且更易于访问。 (4认同)
另一个也适用于Firefox Quantum的快速修复程序是一个空<script>标记<head>.但是,这会影响您的pagespeed洞察力和总体加载时间.
我用它取得了100%的成功.我认为这也是主要原因,为什么上面的解决方案与其他JS一起工作.
<script type="text/javascript">
</script>
- 超级有趣，即使完全不可靠 (2认同)
此页面上的每个答案都会减慢加载速度，并且只会隐藏潜在的问题。如果您遇到 FOUC，请找出发生这种情况的原因并解决它。
从本质上讲，这正在发生：
- 因为你的样式表没有正确加载：它们应该通过
linkHTML 中的标签加载，而不是通过 JavaScript - 因为您将
script标签放在link标签之前，这可能会强制执行“布局操作”，并在浏览器尝试加载样式之前欺骗浏览器进行渲染。
作为参考，以下是 FOUC 的示例：
没有人谈论过 CSS@import
这对我来说是个问题，我直接在我的 css 文件中加载两个额外的样式表@import
简单的解决方案：将所有@import链接替换为<link />
| 归档时间： |
|
| 查看次数： |
32407 次 |
| 最近记录： |