Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno_Ferreira

Preloading simples

Por , em Javascript

Recommended Posts

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Olá amigos,

 

Aqui vai um modo de fazer um preloading simples, com aquela janelinha escrito "Carregando...", geralmente usado em consultas a banco de dados.

Existem várias formas de se fazer, mas essa eu achei bem simples, e aqui vai...

 

Consiste numa div que é exibida com algum evento (ao clicar no botão consultar por exemplo) e some quando os dados são carregados através do evento OnLoad na tag <body>.

 

Esse é o html, é um formulário para consulta no banco de dados, não passei o código todo mas da pra captar a idéia.

<html>
	  <head>
		<title>Consulta Nome</title>
		<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
		<script src="../../../script/script.js"></script>
	  </head>
	  <!--body chamando a função para esconder a div de carga-->
	  <body onload="java script:hideCarga();">
	  <!-- div de carga enquanto carrega o resultado-->
		<div class="loading" id="carga">
			<img class="imgloading" src="../../../img/loading.gif">
			<br/><br/>buscando... por favor, Aguarde
		</div>
			<hr width=100%>
			<div align=center><font face=arial size=5>Pesquisa divida Escob</font></div>
			<hr width=100%>
			<p>
			   <!-- form chamando a função para exibir a div de carga no evento OnSubmit-->
			   <form name=form action="<?php echo $_SERVER['PATH_INFO']; ?>" method=post OnSubmit="showCarga()">
					 <table align=center bgcolor=#00FFFF>
					 <font face=arial>
					   <tr><td align=right><b>Nome:</b></td>
					   <td align=center><input type=text name=local size=8 maxlength=50></td></tr>
					   <tr><td align=center><input type=submit name=submit value=Consultar></td>
					   <td align=center><input type=reset name=reset value=Limpar></td></tr>
					 </font>
					 </table>
			   </form>
			</p>
<?php
{...}
?>
	  </body>
</html>

Note que no formulário é chamada a função para exibir a div de carga, que consiste em uma janela modal com uma imagem, geralmente aquelas imagens gifs de carga, e uma mensagem. e no evento onload da tag body, a função para esconder a div de carga.

 

Agora o css, para configurar a janela modal de carga, note que a janela é oculta por padrão.

.loading{
	display: none;
	background: #FFFFFF;
	position: absolute;
	width: 400;
	height: 200;
	top: 50%;
	left: 50%;
	margin-left: -200;
	margin-top: -100;
	border-style: solid;
	border-color: black;
	border-width: 1;
	text-align: center;
	text-transform: uppercase;
	font-family: arial;
	font-weight: bold;
	color: silver;
	z-index: 3;
}
.imgloading{
	padding-top: 15;
	font-family: arial;
	height: 130;
}

Agora as funções, elas são bem simples, apenas exibem e escondem a div de carga.

//função para exibir a div de carga
function showCarga(){
		document.getElementById('carga').style.display="block";
}
//função para esconder a div de carga
function hideCarga(){
	document.getElementById('carga').style.display="none";
}

O código é bem simples e pode ser usado para outros fins tranquilamente, apenas adaptando-o para a sua página.

 

Então é isso aí, deixem seus comentarios e dúvidas aí que eu estou à disposição.

 

Até mais!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito