Question

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

在CSS中，我设置了

body.has-js {
    display:none;
}

然后我在.has-js部分添加<head>以及以下jQuery代码段：

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

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

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

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

问题：如何消除闪烁，同时仍然让那些禁用JavaScript的用户可以看到该网站？

Answer 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";

Answer 2

而不是像这样使用dom：

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

做类似的事情：

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

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

Answer 3

我认为这是因为，当文档准备好时，脚本会将has-js类添加到body。因此，在<script>$("body").addClass("has-js");</script>代码之后放置<body>。

消除淡入淡出

3 个答案: