Hide elements until the page finishes loading - using jquery
I've just write a dead-simple code to hide all the elements until the page finishes loading and display an indicator while loading.. (It works).
so what I'm asking for is to know if I'm doing it right and what are you going to suggest.
HTML
<body>
<div class="loading">
<img src="indicator.gif"/>
</div>
<div class="content">
<!-- page content goes here -->
</div>
</body>
jquery
$(document).ready(function(){
$(".content").hide();
});
$(window).load(function(){
$(".loading").fadeOut("slow");
$(".content").fadeIn("slow");
});
Answer
You probably want to hide the content div from the start to avoid any possible page flicker depending on what's being loaded on the page.
<body>
<div class="loading">
<img src="indicator.gif"/>
</div>
<div class="content" style="display: none;">
<!-- page content goes here -->
</div>
</body>
$(window).load(function(){
$(".loading").fadeOut("slow");
$(".content").fadeIn("slow");
});