logo标签列表

直到页面加载完成之前隐藏所有内容

jquery
7

我希望在页面加载完成之前将页面上的所有内容都隐藏起来。我看到了很多帖子并尝试了不同的方法。 最常见的解决方案是

<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而使用上面的脚本（尝试过，但无效）
谢谢。
请查看此链接：http://www.inwebson.com/demo/jpreloader-v2/ - caramba
https://dev59.com/U3A65IYBdhLWcg3wyh57#3629799 - 124
3
请将JS代码放在<body>标签后面，并避免使用jQuery（这需要先加载jQuery）。 - Lasse Espeholt
请查看这篇文章... https://dev59.com/mWkw5IYBdhLWcg3wqMU0... - Sarah
实际上我想发布这个链接，因为上面那个没有信息... 这个链接可以预加载所有图片和网站内容，并带有一些有用的回调函数。http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/ - caramba
8个回答
7
为了使用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被启用并且页面已加载，页面元素只会在开始时被隐藏，一旦页面加载完成，这些元素将再次可见。

1
如果我必须这样做，我会这样做：
在CSS中，我会隐藏body：
body{ display:none; }

然后使用jQuery：

$(window).load(function() {
    $("body").fadeIn("slow");
});
尽管您已经发布了这个：

Although you have posted this:

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

you can try this:

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

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

试试这个

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

使用DOM元素的选择器替换“domelement”，以便在加载完成前隐藏它们。

0
我会做以下事情。
<!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，但应该给你带来最低的延迟，因此不会有可见性的闪烁。
0
给标签加上类名并将其CSS设置为"display:none"; 然后在标签之前放置这段代码。
$(document).ready(function {
    $('#bodyOuter').show();
});

所以，它将被隐藏，在页面加载后它将被显示。
0

你提到的闪烁是因为当 jQuery 隐藏 body 时，浏览器已经开始绘制 DOM。更好的解决方案是使用 CSS 隐藏它，在页面加载时完全避免显示任何内容，然后在 jquery.load() 中取消隐藏 body。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接