On load function doesn't work after refresh

For some reason, after I refresh website, code in .on(‘load’, function()) doesn’t want to work. First load is working fine, as intended.

That behaviour started to happen when I introduced loader (animation before page full loads). Before that everything worked just fine.

/* Before page loads */
$( function() {
  $('#intro').hide(); 
});


/* After page loads */
$(window).on('load', function() {
  $('.loader').hide();
  $('#intro').fadeIn(3200);
  includePartials();
  slideOutLandingPage();
});

To be specific, problem is that $(‘#intro’).fadeIn(3200); doesn’t happen and $(‘#intro’) still has attribute display: none;
Any idea what might be the reason for that? Any idea how to bypass this?

HTML:

  <body>
    <div class="loader"></div>
    <div id="intro">
      <div class="title">
        <div class="title-block">
          <h1>Pretty website</h1>
          <h2>Click anywhere!</h2>
        </div>
      </div>
    </div>
    <div id="container">
    ...
    </div>
  </body>
</html>

There are no errors in console.

To your advice, I have added console.log in several places to check order in which they are called, but everything looks like it should.

When I delete /* Before page loads */ part it works on refresh just fine, but loader is (obviously) still there after loads. Not to mention that my whole structure (formatting) of page goes bad.

Here’s how I put console.logs:

$( function() {
  $('#intro').hide(); 
  console.log('Before load');
});


/* After page loads */
$(window).on('load', function() {
  console.log('After load 1');
  $('.loader').hide();
  $('#intro').fadeIn(3200);
  console.log('After load 2');
  includePartials();
  slideOutLandingPage();
});

Since many people wrote in here about document ready – it’s not the solution. It must specifically work on load.



$( function() { is document ready event it is triggered after $(window).on(‘load’.
http://jsbin.com/siduyovaxi/edit?html,js,console,output

The problem is because $(“#intro”).hide() is called after $(“#intro”).fadeIn() method. You need to remove calling hide method and append display:none property to the #intro element.

Something like this.

<body>
    <div class="loader"></div>
    <div id="intro">
      <div class="title">
        <div class="title-block">
          <h1>Pretty website</h1>
          <h2>Click anywhere!</h2>
        </div>
      </div>
    </div>
    <div id="container">

    </div>
</body>
<style>
    #intro {
        display: none;
    }
</style>
<script>
$(window).on('load', function() {
      $('.loader').hide();
      $('#intro').fadeIn(3200);
      includePartials();
      slideOutLandingPage();
});
</script>

Then this will be working.

I mean, it seems to work fine, no?

Solution was to set intial display: none in css then remove “before load” actions and add few lines to on.load

/* After page loads */
$(window).on('load', function() {
  console.log('After load 1');
  $('.loader').hide();
  $('#intro').css('display','flex').hide().fadeIn(3200);
  console.log('After load 2');
  includePartials();
  slideOutLandingPage();
});

Little crude but works.