Loading page with Jquery

Question

Good afternoon friends,

I was doing the following process to display my page when done loading it full:

<script>
      $(document).ready(function(){
            $('.carregado').addClass( 'bye-bye' ).hide('done');
        });
</script>

I used the .addClass to put the class .bye-bye where it contains an animation that makes the <div> that occupies the whole screen. So far ok! How I’m using the following css:

.bye-bye{
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out; 
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out; 
    transition: all 1s ease-out;
}

Well, here’s the problem, how I’m using the opacity: 0; the screen just gets transparent, to try to fix added the .hide(done). The .hide() it works, but it cuts my animation in half.

Well I wanted from you a help, corrections, solutions, in case I’m not doing the load right, how should I proceed?

Hug to all!

Answer 1

Put a .hide() is the same as you do display:none. And display does not work in animations.

Put in your class CSS a property:

visibility:hidden

It does the same function as display, but does not delete the element of the DOM.

And erases the .hide() of the function of jQuery.

Answer 2

Another option is to use the resource .load() jQuery:

$(window).load(function() {
    $(".loader").fadeOut("slow");
})

After window load, widget with class .loader vanishes.

---

@updating:

The methods .load, .unload and .error are depreciated since the version 1.8 jQuery.

Current solution .on('load', function(){...}):

$(window).on('load', function() {
    $(".loader").fadeOut("slow");
});