On load function doesn't work after refresh

Admin 1
Viewed 4686

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.

animation jquery javascript
5 Answers

I had the same problem with my loader.

I only used this to make all my container appear after window is loaded (this was my first test)

    $(window).on('load',function() {
        // Animate container
        $(".container").animate({opacity:1}, 1500);
    });

But it worked the when i reload the page, not when I refresh the page.

I was asking to myself why, but I think I might have the answer...

It's simply because I have this function inside my ready function.

$( document ).ready(function() { }

If I separate the two, everything work even when I refresh or reload the page.

user_55582570
Related