使用 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')）方法的*外部*调用。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
