Question

这是我的html结构：

<div class="content">
<!-- Pre Loading... -->
<div id="loadingMask" style="background: none repeat scroll 0% 0% rgb(255, 255, 255); 
    margin-top: 0px; width: inherit; height: inherit;">
    <img src="images/loading.gif" width="300px">
</div>

<!-- BEGIN: HTML for infos -->

<div id="infopanel"></div>
<div class="clearer">&nbsp;</div>

<!-- END: HTML for infos -->

我的代码是：

$("#infopanel").hide();
...making ajax request and populating infopanel div with results
$("#loadingMask").fadeOut("slow"); 
$("#infopanel").fadeIn("slow");

发生的事情是，用户可以在短暂的时间内看到页面顶部的loadingMask和底部的填充的infopanel div。在这短暂的瞬间之后，只有infopanel才能看到我想要的东西。但是我不喜欢这种效果。我该如何禁用它？

Answer 1

你可以使用这样的回调：

$("#loadingMask").fadeOut("slow", function(){
   $("#infopanel").fadeIn("slow");
});

这样，infopanel只有在loadingMask淡出时才会开始淡出。

可以在短时间内看到预加载器和内容div：如何防止？

1 个答案: