1

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

在 CSS 中，我设置

body.has-js {
    display:none;
}

然后我.has-js在该部分中添加以下 jQuery 片段<head>：

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

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

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

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

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

4

3 回答 3

4

试着在你打开之后把这个<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";
于 2013-05-31T13:03:57.097 回答
3

而不是像这样使用 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标签被创建时，它在添加内容之前就有了他的类。

于 2013-05-31T13:08:16.240 回答
2

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

于 2013-05-31T13:09:04.240 回答