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的显示。到目前为止，我隐藏了$(document).ready中的所有div，如下所示 -

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

但是，使用它的问题是，在完全加载页面之前，会显示所有div。 一切都装满后，页面显得非常精细。

如何延迟显示或类似的事情以避免这种情况。此外，如果可能，如何显示自定义等待消息，＆＃34;正在加载。请等一下＆＃34;直到页面加载100％，才能让观众了解。

（p.s。我正在标记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
});

DEMO：http://jsfiddle.net/Zzg5M/

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

1 个答案: