CALMA AI PESSOAL É SO UM PRELOADER.
Hoje vou falar sobre um assunto um pouco comentado e diferente, vou falar sobre um Preloader em JavaScript.
Preloader é uma imagem ou um texto que aparece no lugar de um elemento na web enquanto o elemento é carregado, e quando o carregamento termina, o preloader (imagem ou texto) desaparece.
Um exemplo de preloader pode ser visto aqui no Dicas para Sites. Quando o site é aberto, é mostrada uma pequena imagem que está escrito “Carregando…” e quando o site todo é carregado, essa imagem desaparece. Isso apesar do que muitos pensam, é algo muito simples de fazer, e acredito eu que não represente problemas em nenhum navegador por ser uma técnica simples em JavaScript.
Veremos agora como fazer o preloader.
Primeiro, adicione a seguinte tag entre as tags <head></head> de seu site:
<script> function loader(){ document.getElementById(”loader“).style.display=”none” } </script>
Depois adicione o seguinte parâmetro na tag <body> do seu site:
onload=”loader()”, ficará assim: <body onload=”loader()”>
Agora, fazemos a <div> que conterá o texto ou a imagem do preloader, para isso simplesmente adicionamos uma simples tag de div LOGO APÓS a tag <body> (isso é feito para o navegador carregar antes de tudo o preloader, para ele ser mostrado enquanto a página é carregada) e atribuímos à ela um id, esse id tem que ser o mesmo que eu deixei em negrito na tag da função, para quando a função em JavaScript for executada, tenha como alvo a div com o preloader. A tag da div é a seguinte:
<div id=”loader” style=”position:fixed; width: 110px; height:24px; left:45%; top:18%; opacity: 0.65;”>Texto ou tag de imagem que você desejar mostrar</div>
OBS: Você pode usar a imagem que quiser como preloader, ou o texto que quiser, mas no caso de imagem, é importante que ela tenha um tamando bem pequeno (eu recomendo no máximo 4kb, a do Dicas para Sites, por exemplo, tem menos de 1kb), para ela ser carregada rapidamente e poder ser mostrada enquanto o resto do site é carregado, porque se for uma imagem muito grande, pode acontecer de o preloader (imagem) aparecer só depois do carregamento do site devido ao peso da imagem.
Adicionadas essas tags na sua página, seu preloader está pronto, mas agora vou explicar todo o processo.
A função em JavaScript, loader() , serve para tornar a div que tem o preloader, invisível, e essa função faz isso através de métodos CSS, pode-se notar que na função está escrito: style.display=”none”. Esse método em CSS faz com que o elemento fique invisível. A função reconhece o elemento do preloader na página através do seguinte parâmetro: document.getElementById(”loader”). O valor contido entre as aspas tem que ser o mesmo que o id da div, porque a função está buscando o elemento na página através do id.
Após adicionar a tag da função, adicionamos o parâmetro onload=”loader()” na tag <body> isso faz com que quando a página for carregada, a função loader() seja chamada, fazendo assim o preloader sumir. Por isso que enquanto a página está sendo carregada (ainda não ocorreu a chamada da função) ainda é possível ver o preloader com a imagem ou texto dizendo que a página está sendo carregada.
Por último, adicionamos a tag da div LOGO APÓS a tag <body> para que quando o navegador abrir o site, a primeira coisa a ser carregada seja o preloader. Nessa tag da div, você pode editá-la com CSS a vontade, mas NÃO SE ESQUEÇA DE LHE DAR UM VALOR DE ID E USAR ESSE MESMO VALOR NA FUNÇÃO EM JAVASCRIPT.
0 comentários:
Postar um comentário