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>
.preload-content
desapareça quando a página carregar?