【问题标题】：Hide page until it's all loaded [duplicate]隐藏页面直到它全部加载[重复]
【发布时间】：2012-09-22 05:13:22
【问题描述】：

可能重复：
How can I make the browser wait to display the page until it's fully loaded?

我有一个简单的网站，我想在确定它已全部加载之前将其打开 X 毫秒（例如图像）。有没有办法一次把它变成整个页面？

我已经有一些淡入淡出来打开网站的各种 div，但我希望淡入淡出仅在页面等待“加载”设置的 X 毫秒后才会发生。

谢谢。

【问题讨论】：

【解决方案1】：

如果您使用 jQuery，只需创建一个带有“请稍候”的 div 和另一个包含所有内容但 style="display:none" 的 div，然后在准备好时将此代码交换。

jQuery.ready(function(){jQuery('#pleasewait').fadeOut('slow'); jQuery('#content').fadeIn('slow');})

【讨论】：

【解决方案2】：

jQuery

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

或

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

或

在您的标签之后立即添加类似这样的内容...

 <style> body  {opacity:0;}</style>

首先要添加类似...

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

所有这些答案都来自How can I make the browser wait to display the page until it's fully loaded?

【讨论】：

非常感谢。最后一个选项轻松完成了这项工作。我遇到了一个愚蠢的问题，因为在所有淡入淡出开始之前，我能够瞥见一些 div，然后它们都会隐藏淡入淡出并为其设置动画。现在一切都很干净，直到它们开始褪色。
没问题，有时候为了速度等人们调用页面底部的JavaScript文件时也会出现这种情况