Stop Preload only when the page loads full

Question

I have a Javascript function that performs the Preload, however the Preload is in fixed seconds. I would like when to load all data from the screen, the Preload hide.

Follow the current script below:

<script>
        $(window).on('load',function(){
            $('.preload-content').fadeOut(2000);
        })
</script>

How can I carry out the process in the right way ?

Answer 1

Try one of these methods:

Using jQuery .hide()

$(window).on('load',function(){
    $('.preload-content').hide();
})

source

Altering the style.display of the element

window.onload = function() {
    document.getElementsByClassName('.preload-content').forEach((elemento) => elemento.style.display = 'none')
}

But I believe you should use the body in place of window in the first example.

Answer 2

Your code is correct. After loading the object window the event will be triggered load which will execute the method .fadeOut() in the element. Only you are specifying that the fade out will last 2 seconds (2000 milliseconds), but it will run right after the load.

By default fadeOut lasts 400 milliseconds if you leave the duration blank, but you can specify a shorter duration using "fast", which will be 200 milliseconds:

$('.preload-content').fadeOut("fast");

Or else a lower value to get faster:

$('.preload-content').fadeOut(100);

Or you can use the method .hide() which hides the widget with no effect. The direction between .hide() and .fadeOut() is that one hides the element without any effect and the other the same thing, but with a fading effect before.

A hint would also be to remove the DOM element right away, since it only actually serves at the top of the page. Then you use the .fadeOut() for that reason:

$('.preload-content').fadeOut(100, function(){
   $(this).remove();
});

So the element will fade by 1-tenth of a second and then be removed from the page instead of just hidden. See how it looks:

$('.preload-content').fadeOut(100, function(){
   $(this).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload-content">Carregando</div>