消除无样式内容的闪烁：一种优雅的降级方法
当网页元素短暂出现时，会发生无样式内容的闪烁（FOUC）在 JavaScript 启动应用这些样式之前，没有它们想要的样式。为了防止这种难看的效果，我们将探索一种解决方案，可以在不影响禁用 JavaScript 的用户功能的情况下优雅地降级。
使用 JavaScript 而不是 CSS 隐藏元素
最初使用 CSS 隐藏元素，然后使用 JavaScript 显示它们是有问题的，因为未启用 JavaScript 的用户将永远不会看到这些元素。更好的方法是使用 JavaScript 来隐藏和显示元素。
用于隐藏和显示页面内容的 jQuery
使用 jQuery，我们可以有效地隐藏页面内容：
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});通过 HTML 隐藏优化显示
但是，对于大页面，上述代码可能无法阻止 FOUC。因此，一旦头部遇到 JavaScript，我们就可以隐藏 HTML 元素：
<html>
<head>
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript">
$('html').addClass('hidden');
$(window).on('load', function() {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>请注意，jQuery addClass() 方法是在 $(window).on('load') 外部调用的回调以立即隐藏 HTML 元素。
此方法通过确保页面内容最初隐藏并在页面完全加载后显示，从而确保优雅降级，即使对于未启用 JavaScript 的用户也是如此。
以上是如何通过优雅降级消除无样式内容的 Flash？的详细内容。更多信息请关注PHP中文网其他相关文章！
