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中显示加载器

2 个答案: