Question

我希望隐藏页面上的所有内容，直到页面加载完毕。我看过很多帖子，尝试过不同的东西。最常用的解决方案是

<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的情况下使用上面的脚本（试过，但没有工作）

感谢。

Answer 1

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

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

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

Answer 2

我使用它的方法有一个js类和一个hidden-until-ready类。我的隐藏直到准备好的样式仅在有js类时才会应用。

e.g

.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，页面的元素才会在开始时隐藏，一旦页面加载，元素就会再次可见。

Answer 3

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

在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();
});

Answer 4

试试这个例子。 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);

Answer 5

试试这个

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

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

Answer 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的最佳实践，但应该为您提供最低的延迟，因此没有可见性。

Answer 7

将类赋予body并将其css设置为“display：none”; 然后将代码放在“body”标记

之前

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

因此，它将被隐藏并在页面加载后将显示

Answer 8

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

隐藏所有内容，直到页面加载完毕

8 个答案: