how to show loader in specific div of only when page is loading

Question

I have following html

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

Now when the page loads I want to show div class menus and footer and until the page loads loader image in div maincontent. How am I to achieve this? I tried putting loader div inside maincontent and using $(window).load(function(){}) but to no avail. Any idea and suggestions is welcome.

http://stackoverflow.com/questions/18379677/display-a-loader-when-the-page-loads Refer http://stackoverflow.com/questions/9207740/display-ajax-loader-on-page-load — Pandiyan Cool, Jan 17 '14 at 06:48

score 0 · Answer 1 · answered Jan 17 '14 at 06:53

This should be the initial 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>

After this, you can hide the loader once the page loads and show the main content. If you are using Jquery, this can be done as follows

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

score 0 · Answer 2 · answered Jan 17 '14 at 07:29

Try this,

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

After window loading,main content loading image hide and menu, footer shows

CheckFiddle

how to show loader in specific div of only when page is loading

2 Answers2