如何在页面完全加载(包括脚本和样式)之前延迟显示页面内容

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,其余的都是隐藏的.有导航按钮可以更新Next/Previous div的显示.到目前为止,我隐藏所有div $(document).ready如下 -

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

但是,使用它的问题是,在页面完全加载之前,将显示所有div. 一切都装满后,页面看起来非常好.

如何延迟显示或类似的东西以避免这种情况.此外,如果可能,如何显示自定义等待消息,"正在加载.请等待",直到页面加载100%,以便查看者的意识.

(ps我正在标记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/