CODEWITHSUNDEEP
jqueryhtmlhideloading
Sam
Sam

Reputation: 91

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

Upvotes: 9

Views: 19376

Answers (2)

nidal
nidal

Reputation: 470

A slight improvement on this Javascript is to use a callback on the fadeout so the fade in starts when the fadeout has completed. This gives you a much smoother transition.

<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", function(){
    $(".content").fadeIn("slow");
  });
});

Upvotes: 6

njr101
njr101

Reputation: 9619

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

Upvotes: 14

Related Questions