Javascript 如何延迟页面内容的显示，直到页面完全加载（包括脚本和样式）

我有多个div，如下所示-

<div id='1' class='divs_nav'>My Dynamic Content</div>
<div id='2' class='divs_nav'>My Dynamic Content</div>
...
<div id='149' class='divs_nav'>My Dynamic Content</div>
<div id='150' class='divs_nav'>My Dynamic Content</div>

<script>    
$(document).ready(
function() {
var a = 2, max = 150;
while (a <= max)
{
$('#' + a).hide();
a++;
}
});
</script>

但是，使用此选项的问题是，在页面完全加载之前，将显示所有div。 一旦加载了所有内容，页面就会显示得非常好

如何延迟显示或诸如此类的操作来避免此问题。此外，如果可能，如何显示自定义等待消息“Loading.Please wait”，直到页面100%加载，以便于查看者了解。

（另一方面，我正在标记html、jquery、javascript和php，因为老实说，我不知道哪一个最适合纠正我的问题）

---

谢谢。

您可以通过CSS隐藏元素，然后在加载整个页面后，显示第一个元素

关于加载消息，添加一个包含该消息的元素，在页面完全加载后可以立即隐藏（或删除）该元素

HTML:

JavaScript:

$(document).ready(function(){
    $('#loading').hide();
    $('.divs_nav').first().css('display', 'block'); //or whatever display value you want
});

---

演示：

发布问题后，我也有了同样的想法。你的回答很及时。一旦stackoverflow接受答案的时间限制完成，我会将其标记为“已接受”。谢谢这个解决方案对你的问题有效吗，阿图尔？我想不会的，因为

$（）。ready

只等待加载DOM，而不是页面，但可能我误解了你的问题。刚刚从JSFIDLE返回我的解决方案。如果你好奇的话，一点CSS也是一样的@RyanMitchell这个解决方案对我有效，因为我首先使用

.divs_nav{display:none；}

[因此在初始页面加载时不显示任何内容]隐藏所有div，并且在

$（document.ready）上只显示first。如果有其他方法，请建议。我希望，我能够澄清。那太好了。我打算建议加载
$（窗口）。加载
而不是
$（文档）。ready（）
（因为这会等待加载所有资产，而不仅仅是DOM），或者（如果异步加载数据）使用
.done（）
显示/隐藏div。
.divs_nav {
    display: none;
}

$(document).ready(function(){
    $('#loading').hide();
    $('.divs_nav').first().css('display', 'block'); //or whatever display value you want
});