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/