如何更有效地消除无样式内容的Flash（FOUC）？
- Linda Hamilton原创
- 2024-11-13 17:33:02271浏览
消除无样式内容的 Flash
当网页在浏览器应用之前短暂显示无样式时，就会出现无样式内容的 Flash (FOUC) CSS 样式表。本文探讨了一种更有效的防止 FOUC 的方法，即使用 JavaScript 最初隐藏然后取消隐藏页面元素：
使用 JavaScript 隐藏和取消隐藏
最初隐藏页面元素CSS 然后使用 JavaScript 取消隐藏可能会导致禁用 JavaScript 的用户出现可访问性问题。更好的解决方案是使用 JavaScript 进行隐藏和取消隐藏。
jQuery 示例
使用 jQuery 的一种可能方法：
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
但是，此方法依赖于文档正文在隐藏之前已准备好，这仍然可能导致一些问题FOUC.
优化方法：隐藏 HTML 标签
另一种策略是在 head 中遇到脚本时，甚至在之前，使用 JavaScript 立即隐藏 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');
$(window).on('load', function () {
$('html').show();
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
在此示例中，在 .load() 之外调用 jQuery addClass() 方法立即隐藏 HTML 标签的函数。
以上是如何更有效地消除无样式内容的Flash（FOUC）？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn