CODEWITHSUNDEEP
jquery
Satheesh Panduga
Satheesh Panduga

Reputation: 818

How can I hide a div till my page is completely loaded(when loading spinner goes hidden)

Am trying to hide a div during the page load while spinner is being shown while loading. But it doesn't work.

Here is what am trying to do:

<script language="javascript" type="text/javascript">
    $(window).load(setTimeout(function() {
        //$('#results').hide();
        $("#spinner").fadeOut();
       //$('#results').show();
    }, 3000));
</script>

What am i missing?

How can I hide my div (id=results) while loading the page and I wanted to show it back once the page is completely loaded. How can I do that?

Upvotes: 0

Views: 1008

Answers (2)

Jonathan Hall
Jonathan Hall

Reputation: 79586

Your code (if you uncomment the #results stuff) waits 3 seconds, hides #result, fades the spinner out, then shows #result.

You probably want to be hiding the result before waiting three seconds:

<script language="javascript" type="text/javascript">
    $('#results').hide();
    $(window).load(setTimeout(function() {
        $("#spinner").fadeOut();
        $('#results').show();
    }, 3000));
</script>

Of course, waiting 3 seconds isn't the ideal way to display a spinner, but I leave that as an exercise for the reader, as that's not directly related to the question.

You will also have improved results if you hide #results by default, possibly inline. Otherwise, you're likely to have lag on a slow network and/or slow device, resulting in #result being shown, then the javascript/CSS loading and hiding it, then showing it again after your spinner is hidden.

<div id="results" style="display: none"> ... </div>

Upvotes: 2

Keval Bhatt
Keval Bhatt

Reputation: 6322

$( window ).load(function() {
  $('.show').show()
});
.show{
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show">
 HI  
</div>

Upvotes: 2

Related Questions