Neste artigo você vai aprender a como mostrar GIF enquanto uma página carrega, de uma maneira simples e eficaz
Fala programador(a), beleza? Bora aprender mais sobre o evento de carregamento de página com JavaScript!
Primeiramente vamos criar uma div que preenche a tela do site todo, cobrindo os elementos que estão carregando
O HTML que vamos utilizar é:
<div id="fade-container">
<img src="seugifaqui.gif">
</div>
E agora vamos estilizar este container para que ele fique na frente de todo o conteúdo
Veja o CSS necessário:
#fade-container {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
background: #ccc;
}
img {
text-align: center;
}
E agora vamos adicionar um evento que vai fazer esta tela desaparecer
E aí o real conteúdo site será exibido
Veja o código JavaScript:
window.addEventListener("load", function() {
var fadeContainer = document.querySelector("#fade-container");
setTimeout(function() {
fadeContainer.style.display = "none";
}, 1000);
});
Aqui neste código estamos criando um evento que dispara quando todos os elementos da tela carregarem, ou seja, o “load”
Então encapsulamos o fade container em uma variável
E depois de um segundo, com setTimeout, fazemos ele desaparecer
Como toda a página já está carregada, podemos ocultar nosso container e o gif também de loader
Conclusão
Neste artigo vimos como mostrar GIF enquanto uma página carrega
Criamos um container que fica a frente de todo o conteúdo da página e exibe um GIF
Após o carregamento completo da página nós o ocultamos e exibimos o restante do nosso conteúdo
Desta maneira, o loader automaticamente desaparece após os elementos da página serem exibidos
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube