how to show loader in specific div of <body> 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.

stackoverflow.com/questions/18379677/… Refer stackoverflow.com/questions/9207740/… — Pandiyan Cool
– Pandiyan Cool, Commented Jan 17, 2014 at 6:48

Akshat Goel · Accepted Answer · 2014-01-17 06:53:06Z

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(); });

JEYASHRI R · Accepted Answer · 2014-01-17 07:29:13Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related