Como mostrar GIF enquanto página carrega

Indicação
Como mostrar GIF no carregamento da página

Ao criar uma experiência envolvente para os usuários em seu site, é essencial considerar não apenas o conteúdo, mas também os aspectos visuais que acompanham a navegação. Por isso, uma maneira interessante de manter os usuários engajados enquanto aguardam o carregamento de uma página é mostrar um GIF animado. 

Neste guia, exploraremos como incorporar um GIF animado em uma página da web para entreter os visitantes durante o processo de carregamento.

Conteúdo

O que preciso saber antes de seguir o tutorial como mostrar GIF no carregamento

Antes de mergulharmos no processo de exibição de GIFs durante o carregamento de uma página, é importante ter algumas noções básicas sobre desenvolvimento web. Então, certifique-se de que você está familiarizado com os seguintes conceitos:

Agora que você está preparado, vamos começar a melhorar a experiência do usuário ao mostrar um GIF durante o carregamento de sua página web.

Passo 1: Escolhendo o GIF Adequado

Escolha um GIF Relevante para mostrar

O primeiro passo é selecionar um GIF animado que esteja relacionado ao tema do seu site. Certifique-se de que o GIF escolhido seja atraente e capaz de capturar a atenção dos usuários.

Tamanho e Resolução

Opte por um GIF de tamanho adequado para evitar aumentar desnecessariamente o tempo de carregamento da página, também pode colocar uma animação CSS ao inves de um GIF, para isso aprenda como fazer uma animação css de loading. Além disso, ajuste a resolução do GIF para que ele seja nítido e claro, mantendo um equilíbrio entre qualidade e desempenho.

Passo 2: Incorporando o GIF, estrutura basica

Método 1: Tag img para mostrar GIF

Uma maneira simples de exibir um GIF animado é usando a tag <img> do HTML.

Método 2: Elemento object para mostrar GIF

Ou então, seguir outra abordagem, que é usar o elemento <object> para incorporar o GIF. Isso permite maior flexibilidade, pois você pode definir largura e altura específicas, bem como fornecer um conteúdo alternativo para navegadores que não suportam GIFs.

				
					<img decoding="async" src="caminho/do/seu/gif.gif" alt="GIF de Carregamento">

<object data="caminho/do/seu/gif.gif" type="image/gif">
    <img decoding="async" src="caminho/do/seu/fallback-image.jpg" alt="GIF de Carregamento">
</object>

<!-- Contêiner para o GIF de carregamento (inicialmente oculto) -->
<div id="loading-container">
    <img decoding="async" id="loading-gif" src="seu-gif-de-carregamento.gif" alt="GIF de Carregamento">
</div>

				
			

Passo 3: Estilizamento para mostrar o GIF

CSS para Posicionamento

Utilize CSS para posicionar o GIF animado de forma adequada na página. Você pode definir propriedades como position, top, left, margin, entre outras, para ajustar a exibição do GIF de acordo com o layout do seu site. Veja o exemplo a seguir:

				
					/* Estilizando o contêiner do GIF */
#loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Estilizando o próprio GIF */
#loading-gif {
    width: 100px; /* Ajuste o tamanho conforme necessário */
}

/* Adicione mais estilos conforme necessário, como margens, sombras ou animações personalizadas */

				
			

Passo 4: Como mostrar o GIF no carregamento da página

Agora, vamos garantir que o GIF seja exibido enquanto a página está carregando.

JavaScript para controle de exibição

Você pode usar JavaScript para controlar a exibição do GIF animado. Quando a página estiver carregando, faça o GIF ser visível. Quando o carregamento estiver completo, esconda o GIF e revele o conteúdo da página.

Exemplo de código JavaScript:

				
					// Mostrar o GIF de carregamento enquanto a página carrega
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("loading-container").style.display = "none";
});
				
			

Dicas para mostrar o GIF no carregamento

  1. Otimização de Tamanho de GIF: Certifique-se de otimizar o tamanho do GIF para manter o tempo de carregamento da página mínimo. Use ferramentas de compressão de imagem para reduzir o tamanho do arquivo sem comprometer a qualidade visual.

  2. Responsividade: Certifique-se de que o GIF seja responsivo para que ele seja exibido corretamente em dispositivos móveis, tablets e desktops.

  3. Teste em Diferentes Navegadores: Verifique se o GIF é compatível com vários navegadores para garantir uma experiência consistente.

Vejá também sobre como criar animações de loading incríveis com HTML e CSS? Leia nosso artigo sobre Animação de Loading com HTML e CSS.

Lembre-se de que essas dicas podem ser adaptadas de acordo com as necessidades específicas do seu site e do seu público-alvo.

Conclusão

Em resumo, incorporar um GIF animado durante o carregamento da página é uma maneira eficaz de manter os usuários entretidos e reduzir a percepção do tempo de espera. Ao seguir os passos mencionados acima e personalizar a exibição do GIF de acordo com o estilo do seu site, você pode proporcionar uma experiência de usuário mais agradável e memorável. 

Também, atente-se e teste a experiência em diferentes dispositivos para garantir que o GIF seja exibido corretamente em todas as situações.

Como se tornar um desenvolvedor Web?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação web.

Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.