0

Tenho uma função em JavaScript que realiza o preload, porém o preload está em segundos fixos. Gostaria de quando carregar todos os dados da tela, o preload ocultasse.

Segue o script atual abaixo:

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

Como posso fazer para realizar o processo da forma correta ?

4
  • Você pode tentar estudar sobre Prefetching, preloading, prebrowsing. css-tricks.com/prefetching-preloading-prebrowsing 25/03/2019 às 18:07
  • Você quer que o .preload-content desapareça quando a página carregar?
    – g-otn
    25/03/2019 às 18:10
  • Extamente G.Otani P. 25/03/2019 às 18:10
  • Sua pergunta não está clara, não é só retirar o fadeOut()? A página está carregada e ainda fica o preload por um tempo é isto?
    – LeAndrade
    25/03/2019 às 18:22

2 Respostas 2

2

Tente um desses métodos:

Utilizando jQuery .hide()

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

fonte

Alterando o style.display do elemento

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

Porém acredito que você deva usar o body no lugar de window no primeiro exemplo.

1
  • Funcionou amigo. muito obrigado! 25/03/2019 às 19:25
1

Seu código está correto. Após carregar o objeto window será disparado o evento load que executará o método .fadeOut() no elemento. Só que você está especificando que o fade out irá durar 2 segundos (2000 milissegundos), mas ele será executado logo após o load.

Por padrão o fadeOut dura 400 milissegundos se você deixar a duração em branco, mas você pode especificar uma duração mais curta usando "fast", que será de 200 milissegundos:

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

Ou então um valor menor ainda para ficar mais rápido:

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

Ou pode usar o método .hide() que esconde o elemento sem efeitos. A direfença entre .hide() e .fadeOut() é que um esconde o elemento sem nenhum efeito e o outro a mesma coisa, mas com um efeito de esmaecimento antes.

Uma dica também seria remover logo o elemento do DOM, já que ele só serve mesmo na abertura da página. Aí você usa o callback do .fadeOut() para isso:

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

Assim o elemento irá esmaecer em 1 décimo de segundo e depois será removido da página em vez de apenas escondido. Veja como fica:

$('.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .