15

实际上，这更像是一个错误描述而不是一个问题。

我在一个非常简单的登录页面上注意到 Firefox 中无样式内容 (FOUC) 的闪烁。没有使用图像。没有繁重的 CSS。所有 Javascript 都放在代码的末尾，就在结束 body 标记之前。但是当页面加载时，Firefox 显示一个完全没有样式的页面大约 100 毫秒，然后 css 生效。这种情况每次都会发生，无一例外。

偶然我发现了某种破解方法来解决这个问题：只需在 中添加一个<script>元素，在其中<head>放置您喜欢的任何 javascript 代码，甚至是一个简单的注释，然后 - bam！- 问题解决了。像这样：

<script>/* foo */</script>

FOUC 的实际原因似乎是在表单字段之一中使用了 autofocus 属性。因此，删除“自动对焦”也可以解决问题。

这不是很奇怪吗？ 有谁知道比我更好的解决方案？

4

1 回答 1

11

我可以在 Firefox v.53 中确认这种行为，通过消除我也将其追踪到文本输入上的“自动对焦”属性。

您可以通过在 Javascript 中设置焦点来删除 FOUC，例如：

document.getElementsByClassName('form-field')[0].focus();

或者使用 jQuery：

$('.form-field').focus();
于 2017-05-04T22:59:56.893 回答