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.
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.
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.
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?
$(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./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>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.
$( function() { is document ready event it is triggered after $(window).on('load'.
http://jsbin./siduyovaxi/edit?html,js,console,output