Você está procurando por performance?
Ao menos que seja para fins de estética, se você está buscando este artigo para resolver questões de lentidão em seu site, eu recomendo que antes de aplicar um GIF de carregamento em suas páginas que leia estas dicas de performance aqui no Blogson;
Como carregar imagens lentamente em seu site (lazy load)
Otimize as imagens do seu site com WebP e Statically CDN.
Em breve estarei escrevendo também técnicas de performance para CSS e JS e quem sabe um dia, o uso de um GIF de carregamento em seu site se torne desnecessário, ao menos que realmente queira utilizar para fins de estética apenas.
Introdução
Esta é uma dica bem legal para sistemas web e também para aplicativos. Durante o carregamento de uma página podemos exibir um gif para entreter o usuário, além de informar visualmente que dados estão sendo carregados na página (lembre-se dos conceitos de UX).
Isso se torna ainda mais eficiente quando precisamos carregar um volume grande de dados na página, o tempo excessivo do carregando pode fazer com que usuário abandone a página, ou simplesmente a atualize novamente gerando um pequeno gargalo na conexão do servidor.
Criando uma DIV flutuante na sua página.
O truque consiste em criar uma DIV flutuante logo no início do carregamento da página e esconde-la no final do carregamento. Podemos resolver este problema de várias formas, sendo que a mais simples dela é usando um pouco de CSS para estilizar a DIV flutuante e JS para esconder a DIV.
Para criar uma DIV flutuante podemos usar o código CSS a seguir;
.load{
width:100px;
height:100px;
position:absolute;
top:30%;
left:45%;
color:blue;
}
Perceba que o tamanho da DIV foi fixado em 100 x 100 pixels de altura e largura.
Aplicando este código CSS em uma página HTML, teremos algo assim;
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Starter Template for Bootstrap 4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.load {
width: 100px;
height: 100px;
position: absolute;
top: 30%;
left: 45%;
color: blue;
}
</style>
</head>
<body>
<div class="load"> div que vai receber a animação</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Perfeito, temos como resultado isso aqui;
Acrescentando a animação de loading dentro da DIV flutante.
Agora vamos deixar essa DIV bonita, vamos tirar o texto e substituir por um gif animado. Neste exemplo vou usar um ícone do FontAwesome. Para isso, precisamos adicionar o CDN do FontAwesome na nossa página, utilize o seguinte código dentro do <HEAD></HEAD> do seu documento;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Temos que escolher o ícone. O FontAwesome oferece 5 tipos de ícones animados próprios para carregamento da página, para ver acesse: http://fontawesome.io/examples/
Loading…
Loading…
Loading…
Loading…
Loading…
Depois de escolher o seu favorito, vamos copiar o código dele e colar dentro da DIV flutuante. Neste exemplo eu escolhi o ícone da engrenagem, então o código ficará assim;
<div class="load"> div que vai receber a animação</div>
troquei por
<div class="load"> <i class="fa fa-cog fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span> </div>
O resultado fico assim (clique na imagem para executar o gif);
Outros gifs geniais para colocar no carregamento (loading) da página.
Caso não goste de nenhum ícones, podemos usar GIFs muito legais que podem ser facilmente encontrados no Google. Eu fiz uma compilação de alguns deles. Basta clicar para ve-los em ação.
Para usar um GIF basta chamá-lo dentro da DIV flutuante com a tag <IMG>, exemplo;
<div class="load"> <img src="nome-do-arquivo.gif"></div>
Também, existem sites especialistas nestes gifs, que também são chamados de pre loaders aonde você pode inclusive criar a sua própria animação de carregamento, ou, editar alguns já existentes. Os melhores sites sem dúvidas são o preloaders.net e o cssload.net. Divirta-se com eles.
Escondendo a DIV de load no final do carregamento da página.
Conforme já explicado no ínicio, temos que esconder essa DIV ao final do carregamento da página, portanto, podemos usar usar o DOM do JS ou o jQuery para realizar esta ação, a seguir, um exemplo usando jQuery e em seguida o mesmo código usando DOM.
Antes da tag </BODY> vamos acrescentar o seguinte código;
<script>
//código usando jQuery
$(document).ready(function() {
$('.load').hide();
});
</script>
Usamos a função $(document).ready(function() { … } no jQuery quando queremos executar um bloco de código quando todos os elementos da página estiverem devidamente carregados. Sendo assim, ao terminar de carregar todos os elementos a DIV flutuante será escondida.
O código completo ficou assim;
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.load {
width: 100px;
height: 100px;
position: absolute;
top: 30%;
left: 45%;
color: blue; }
</style>
</head>
<body>
<div class="load"> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> </div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script>
//código usando jQuery
$(document).ready(function() {
$('.load').hide(); });
</script>
</body>
</html>
Caso não queira, por algum motivo, usar jQuery, você pode manipular o elemento usando DOM, basta utilizar este outro código, que é equivalente ao jQuery.
<script>
//código usando DOM (JS Puro)
document.addEventListener("DOMContentLoaded", function(event) {
var estilo = document.getElementsByClassName('load');
estilo[0].style.visibility = "hidden";
});
</script>
Teste o carregamento da página.
Preparei uma prova de fogo para sabermos se este código não é uma fraude. Eu coloquei no código uma imagem de 4 MB e que possamos analisar o comportamento da página. Você poderá ver o resultado de teste clicando aqui.
Você verá que enquanto a imagem não for carregada por completo a DIV flutuante continua ativa. Legal né?
Faça o Download do exemplo desta aula e corra contar para os seus amigos!
Agora chegou a hora da alegria, o momento em que o Professor Anderson coloca exemplos da aula para download. Conte para seus amigos, compartilhe o conhecimento, grite Corinthians bem alto e bons estudos!!!!
pagina-exemplo-download-loading-carregamento-pagina-gif-animado
