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

Question

我有多个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>

div的内容是通过mysql加载的。我只想一次显示一个 div，其余的都是隐藏的。有导航按钮来更新下一个/上一个 div 的显示。到目前为止，我将所有 div 隐藏在 $(document).ready 中，如下所示 -

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

但是，使用这个的问题是，在页面完全加载之前，所有的 div 都会显示。加载所有内容后，页面显示完美无缺。

我怎样才能延迟显示或类似的东西来避免这种情况。此外，如果可能，如何显示自定义等待消息，“正在加载。请稍候”，直到页面加载 100%，以便查看者了解。

(附注:我标记了 html、jquery、javascript 和 php，因为老实说我不知道​​哪一个最能解决我的问题)

谢谢。

Answer 1

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

关于加载消息，添加一个包含它的元素，您可以在页面完全加载后立即隐藏(或删除)它。

HTML:

<div id="loading">Loading, please wait...</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>

CSS:

.divs_nav {
    display: none;
}

JavaScript:

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

演示:http://jsfiddle.net/Zzg5M/