如何在特定的div中显示加载器 <body> 仅在页面加载时

Question

我有以下HTML

<body>
<div class="menus"></div>
<div class="maincontent"></div>
<div class="footer"></div>
</body>

现在，当页面加载时，我想显示div类菜单和页脚，直到页面在div maincontent中加载加载器图像为止。 我该如何实现？ 我尝试将loader div放入maincontent中，并使用$(window).load(function(){})但无济于事。 任何想法和建议都欢迎。

Answer 1

这应该是初始的HTML。

<body>
<div class="menus"></div>
<img src="ajaxloader.gif" class="loader" style="display:block"/>
<div class="maincontent" style="display:none">
</div>
<div class="footer"></div>
</body>

此后，您可以在页面加载后隐藏加载器并显示主要内容。 如果您使用的是Jquery，则可以按照以下步骤进行操作

$(document).ready(function(){
$('.loader').hide();
$('.maincontent').show();
});

Answer 2

尝试这个，

$(document).ready(function(){    
$(".maincontent").fadeOut( "slow"); 
$(".menus,.footer").fadeIn("slow", function() {
     $(this).text("menu, footer"); 
}); 
});

窗口加载后，主要内容加载图像隐藏和菜单，页脚显示

CheckFiddle

如何在特定的div中显示加载器 <body> 仅在页面加载时

问题描述

2 个解决方案

解决方案1
0 2014-01-17 06:53:06

解决方案2
0 2014-01-17 07:29:13

如何在特定的div中显示加载器 <body> 仅在页面加载时

问题描述

2 个解决方案

解决方案1 0 2014-01-17 06:53:06

解决方案2 0 2014-01-17 07:29:13

解决方案1
0 2014-01-17 06:53:06

解决方案2
0 2014-01-17 07:29:13