Preloading simples
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>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;
}//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!!!
Discussão (1)
Carregando comentários...