隐藏所有内容，直到页面完成加载答案

【问题标题】：Hiding everything until the page has finished loading隐藏所有内容，直到页面完成加载
【发布时间】：2014-02-28 12:40:23
【问题描述】：

我希望在页面加载完成之前隐藏页面上的所有内容。我看过很多帖子并尝试过不同的事情。最常见的效果很好的解决方案是

<body style="display:none;">

然后运行 jQuery 以在窗口加载时再次显示它

$(window).load(function() {
  $("body").fadeIn("slow");
});

我对此有疑问，因为页面完全依赖 JS 来显示任何内容。我很感激这是一件罕见的事情，但只是感觉不对。

理想情况下，我也想使用 jQuery 添加 display:none css

不过……

问题是当我添加

$(document).ready(function {
  $(body).css('display', 'none');
});

即使这样也需要一段时间才能运行，并且页面会在内容之前闪烁。

有没有更好的办法？

我可以在没有 document.ready 的情况下使用上面的脚本吗（尝试过，但没用）

谢谢。

【问题讨论】：

检查这个：inwebson.com/demo/jpreloader-v2
stackoverflow.com/a/3629799/3058754
尝试将 JS 放在 <body> 之后并且不使用 jQuery（这需要先加载 jQuery）。
查看这篇文章...stackoverflow.com/questions/9734021/…...
实际上我想发布此链接，因为上面没有任何信息。这会预加载所有图像和网站内容，并带有几个有用的回调inwebson.com/jquery/…

标签： jquery

【解决方案1】：

要使用 javascript 隐藏它，请在 BODY 标签声明之后设置脚本：

<body>
    <script>document.body.style.display = "none";</script>

这样，如果禁用了 javascript，BODY 仍然会显示

【讨论】：

【解决方案2】：

我使用它来创建js 类和hidden-until-ready 类的方法。仅当有 js 类时才应用我的隐藏直到就绪样式。

例如

.js .hidden-until-ready {
    visibility: hidden;
}

如果启用了 JavaScript，则在开始时应用 js 类。

document.documentElement.className = document.documentElement.className + ' js';

然后在 jQuery 中，一旦页面加载完毕，我会删除 hidden-until-ready。

jQuery(document).ready(function () {
    jQuery('.hidden-until-ready').removeClass('hidden-until-ready');
});

这样，页面的元素只有在启用 JavaScript 的情况下才会在开始时隐藏，并且一旦页面加载，元素就会再次可见。

【讨论】：

【解决方案3】：

试试这个例子。 http://jsfiddle.net/iashu/AaDeF/

<div id="loading"></div>

<div id="container">
    container content....
</div>

jQuery

$(window).load(function() {
    //show();
});


function show() {
    $('#loading').hide();
    $('#container').fadeIn();
};

setTimeout(show, 3000);

【讨论】：

【解决方案4】：

如果我必须这样做，那么我会这样做：

在 css 中我会隐藏正文：

body{ display:none; }

然后使用 jQuery：

$(window).load(function() {
    $("body").fadeIn("slow");
});

虽然你已经发布了这个：

$(document).ready(function() {
  $(body).css('display', 'none'); // $(body) is missing the quotes
});

你可以试试这个：

$(document).ready(function() {
  $('body').hide();
});

【讨论】：

【解决方案5】：

试试这个

    $('#domelement').css('opacity', 0);
    $(window).load(function() {
      $('#domelement').css('opacity', 1);
    });

将“domelement”替换为要隐藏直到加载的 DOM 元素的选择器

【讨论】：

【解决方案6】：

我会做以下事情

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body class="hidden">
    this is the body...



    <script type="text/javascript">
        $(document).ready(function(){
            $("body").removeClass('hidden');
        });
    </script>
</body>
</html>

所以将它隐藏在标题的内联 CSS 中（这样它会立即生效，并且不会遭受获取外部文件的延迟），然后在 Javascript 中尽情享受。注意：这不是内联 CSS 和 JS 的最佳做法，但应该可以为您提供最低的延迟，因此不会一闪而过。

【讨论】：

【解决方案7】：

为 body 设置类并将其 css 设置为“display:none”；然后将代码放在“body”标签之前

$(document).ready(function {
    $('#bodyOuter').show();
});

所以，它会被隐藏，页面加载后会显示出来

【讨论】：

【解决方案8】：

您提到的闪烁即将到来，因为当 jquery 隐藏正文时，浏览器将开始绘制 dom。更好的解决方案是用css隐藏它，这应该避免在页面加载时显示任何东西，然后你可以在jquery.load()中取消隐藏body

【讨论】：