Loading modal during the transition between two pages

Question

I've got a login page that redirects you to an index page, the index page has this code:

    <script type="text/javascript">


<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>
jQuery:

$(window).load(function(){

   $('#overlay').fadeOut();

});


    </script>

It loads just a simple modal. The issue is that the it shows the modal after a few seconds of delay. No just when the page is loading. The index page is heavy in content.

What I want is that just when for example chrome is loading (it's show a little circle spinning) my page show the modal. The seconds of delay I think is why index its heavy.

score 0 · Answer 1 · answered Feb 21 '14 at 19:37

When you add a function to the $(window).load() you are saying: call me when the page is finished loading. It sounds like you want to hide the spinner while the page is loading, not after. The problem is that jQuery might not be ready either, but if you don't have to support too many browsers, you can try it in a simple function instead of in load().

<script type="text/javascript">
  $('#overlay').fadeOut()
</script>

Otherwise, if jQuery doesn't work because it isn't ready yet, then you may have to write the fadeOut logic yourself.

score 0 · Answer 2 · edited May 23 '17 at 11:57

Your example is a little odd. Maybe just some reformatting of your code?

<div id="overlay">
 <img src="loading.gif" alt="Loading" />
 Loading...
</div>

<script type="text/javascript">
  // Using the shorthand jQuery ready code. Basically
  // this will add an anonymous function to a stack
  // and when the document's ready event fires, it
  // goes through the stack and runs anything you've
  // added. So, document is ready, no run:

  $(function(){
    $('#overlay').fadeOut();
  });
</script>

Or maybe your question is more about the difference between load event in window and document's ready event. See this for more window.onload vs $(document).ready()

Loading modal during the transition between two pages

2 Answers2