Flash of unstyled (FOUC) (仅在Firefox中)
在我测试过的任何其他浏览器-- IE，Chrome，Opera --中我都没有看到这个问题，但是当我从服务器上加载一个页面时，在CSS只在Firefox中应用之前，我看到了一个没有样式的内容。
你可以在你的火狐浏览器上查看这个网址，最新版本59：https://regalaunpuzzle.es/puzzles-personalizados
回答 2
Stack Overflow用户
发布于 2019-03-05 23:38:50
在我的例子中，FF中的FOUC的原因是页面上出现了iframe。如果我从标记中删除iframe，那么FOUC就会消失。
但是出于我自己的黑客原因，我需要iframe，所以我改变了这个
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>进入到这个
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>为了可读性，我在模板中添加了这个内联JS :在我的例子中，这段代码每页运行一次。我知道这是一个肮脏的技巧，所以你可以将这段代码添加到单独的JS文件中。
问题出在Firefox Quantum v65中。
我看到你的页面也有iframe，所以这种方式会有帮助。
Stack Overflow用户
发布于 2021-08-16 17:02:04
将主体可见性设置为隐藏，然后在一个单独的JavaScript文件中添加一个onload函数，使其再次可见。我们实际上是在减慢页面的速度，以便在加载文档之前加载样式。
我所做的是将一个类设置为body <body class="hidden">，然后是css .hidden {visibility: hidden}，然后是javascript：
const body = document.querySelector(".hidden");
window.onload = () => {
body.removeAttribute("class");
}https://stackoverflow.com/questions/49749908
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号