消除淡入淡出闪烁答案

【问题标题】：Eliminate fadeIn blink消除淡入淡出闪烁
【发布时间】：2013-05-31 21:49:29
【问题描述】：

我正在使用一种相当标准的技术来使用 jQuery 淡入 <body>，同时让那些没有启用 JavaScript 的用户可以看到它。

在 CSS 中，我设置

body.has-js {
    display:none;
}

然后我在<head> 部分添加.has-js 和以下jQuery sn-p：

<script>
   jQuery(document).ready(function($) {
       $("body").addClass("has-js");
   });

   window.onload = function() {
      jQuery("body").fadeIn(500);
   }
</script>

理想的结果是使网站最初不可见，然后在所有内容加载后使其平滑淡入。

问题：显然，内容在 JavaScript 启动之前加载，因此在添加 .has-js 类之前页面会短暂闪烁。这发生在除 Firefox 之外的所有浏览器中。

问题：我怎样才能消除这种闪烁，同时让那些禁用了 JavaScript 的用户仍然可以看到该网站？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

试着在你刚开张<body>之后放这个：

<script>
(function () {
    var elements = document.getElementsByTagName("body");
    var body = elements[0];
    body.className = "has-js";
})();
</script>

您实际上不需要等待 DOM 在您的场景中加载，并且无论何时加载此脚本，您都可以保证至少有 body 元素可用。

如果您的body 已经在 HTML 中分配了一个类，请将最后一行替换为以下内容：

body.className += " has-js";

【讨论】：

我认为它应该放在标签之后，不是吗？
@roasted：他也可以，是的。
我想知道把它放在头上是否可行。如果是，似乎最好放入
试过了。在中，脚本不起作用。身体后，网站闪烁。
@Figaro：是的，我也检查过，出于某种原因，我认为 body 可用于 head 中的脚本。

【解决方案2】：

而不是像那样使用 dom ready：

jQuery(document).ready(function($) {
    $("body").addClass("has-js");
});

做这样的事情：

<head>
</head>
<body>
    <script>
        document.getElementsByTagName('body')[0].className = 'has-js';
    </script>
    <!-- Your content -->
</body>

这样，当body标签被创建时，它在添加内容之前就有了他的类。

【讨论】：

天才。谢谢@Karl-Andre，这当然解决了问题。
是的，@MMM，我刚刚注意到了编辑。谢谢。不过我还有一个问题。由于某些特殊原因，添加类会破坏导航菜单的显示。您可以尝试单击“关于”以了解我的意思吗？
由于某种原因，li 中的a 有一个margin : -11px 10px 10px 10px。将其更改为 margin : 0 10px 10px 即可。
在body标签后面加脚本之前怎么不影响显示？另外，请您现在点击 INVESTORS 查看为什么将上边距设置为 -11px？
好吧，把边距替换为-11px，给.main-navigation ul ul添加11px的内边距。

【解决方案3】：

我认为那是因为，当文档准备好时，脚本会将 has-js 类添加到正文中。所以把<script>$("body").addClass("has-js");</script>放在<body>标签之后。

【讨论】：