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

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

<body style="display:none;">

然后运行了jQuery在窗口负荷再次显示

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

我有这样一个问题，因为页面是依赖于JS来显示什么在所有。我很欣赏这是一件罕见的事情，但只是感觉不对。

理想我想使用jQuery添加显示：无CSS以及

然而

...

问题是，当我添加

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

即使这需要一段时间运行并且页面会先用内容闪烁。

有没有更好的方法？

我可以用上面的脚本没有的document.ready（试过，但没;吨工作）

感谢。

来源

2014-02-28 Pete Norris

检查此：http://www.inwebson.com/demo/jpreloader-v2/ – caramba

http://stackoverflow.com/a/3629799/3058754 –

尝试将JS放在''之后并且不使用jQuery（这需要先载入jQuery）。 –

试试这个

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

替换“一个DOMElement”与DOM元素（S）的选择要隐藏，直到加载

来源

2014-02-28 12:44:53 CodeFanatic

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

body{ display:none; }

然后使用jQuery：

在CSS我会藏起了身体

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

虽然你已经张贴这样的：刚BODY标签后声明

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

来源

2014-02-28 12:45:08 Jai

要使用JavaScript隐藏，设置脚本：

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

你可以试试这个

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

这种方式如果javascript禁用，BODY仍显示为

来源

2014-02-28 12:45:52

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

来源

2014-02-28 12:47:25

我用它有一个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时才会隐藏起来，一旦页面加载后元素再次可见。

来源

2014-02-28 12:48:37

我会做以下

<!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的最佳实践，但应该给您最低的延迟，因此不会有闪光灯的可见性。

来源

2014-02-28 12:53:10 LDJ

给课堂上课，并将其CSS设置为“display：none”; 然后把代码前的“身体”标签

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

那么，它会被隐藏，页面加载后，它会显示你所提到的来了，因为当时的jQuery隐藏身体

来源

2014-02-28 12:56:40

闪烁，浏览器将开始绘制dom。更好的解决方案是用css隐藏它，这应该避免在页面加载时显示任何东西，然后你可以取消隐藏jquery.load内部的body（）

来源

2017-07-23 17:03:14

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

回答

相关问题