CODEWITHSUNDEEP
javascriptjqueryanimation
user6052428
user6052428

Reputation:

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.

Upvotes: 4

Views: 5935

Answers (5)

Bruno Mattelet
Bruno Mattelet

Reputation: 101

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.

Upvotes: 4

user6052428
user6052428

Reputation:

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.

Upvotes: 0

Taplar
Taplar

Reputation: 24965

I mean, it seems to work fine, no?

$(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');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 0

smupyknight
smupyknight

Reputation: 174

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.

Upvotes: 0

Anarion
Anarion

Reputation: 1038

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

Upvotes: -3

Related Questions