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

【问题标题】：how to show loader in specific div of <body> only when page is loading仅在页面加载时如何在 <body> 的特定 div 中显示加载器
【发布时间】：2014-01-17 06:46:41
【问题描述】：

我有以下 html

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

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

【问题讨论】：

stackoverflow.com/questions/18379677/… 参考stackoverflow.com/questions/9207740/…

标签： javascript jquery html css

【解决方案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();
});

【讨论】：

【解决方案2】：

试试这个，

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

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

CheckFiddle

【讨论】：