Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno_Ferreira

Como fazer uma Barra ou outro ícone de Carregamento

Por , em Javascript

Recommended Posts

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Boa tarde amigos,

 

Gostaria de saber como fazer uma barra de carregamento ou então uma imagem (tipo gif) de carregamento.

Tipo quando você edita um post aqui o imasters e aparece um circulo animado com a mensagem "Carregando... Aguarde".

 

Cheguei a pesquisar se o javascript tem algum evento que é executado enquanto uma página está carregando mas pelo visto não tem?

 

Como faço isso? cheguei a pesquisar no Lab de Scripts mas não tem nada lá.

 

Valeu!!! http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

vai no google amigo, tem vários exemplo

a imagem pode gerar aqui:

http://www.ajaxload.info/

Oi Ted,

 

Acontece o seguinte, trata-se de uma página php que faz uma consulta à um banco de dados e retorna uma tabela com os resultados.

De início eu tentei o seguinte, criei uma div com a imagem de loading e deixei no centro da janela, depois coloquei na tag body um evento onload de forma que quando terminasse de carregar, essa div seria ocultada, acontece que isso não está acontecendo, ou seja, a div continua a ser exibida.

 

Você saberia como resolver isso?

 

Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Provavelmente o código de ocultar o div que está errado, pois no onload do body, se você colocar para ocultar um div, deveria funcionar.

Não dá pra colocar o código da página todo pois é muito grande, mas aqui vai o script e parte da página com o div:

 

INDEX.PHP

<?php
   {...}
?>
<html>
   <head>
	  <title>página Consulta</title>
	  <style type="text/css">
		 .loading{
			display: inline;
			background: #FFFFFF;
			position: absolute;
			width: 400;
			height: 200;
			top: 300;
			left: 400;
			border-style: solid;
			border-color: black;
			border-width: 1;
			text-align: center;
			text-transform: uppercase;
			font-family: arial;
			font-weight: bold;
			color: silver;
	   }
	  .imgloading{
			padding-top: 15;
			font-family: arial;
			height: 130;
	   }
	  </style>
		  <script>
			 function hideCarga(){
				document.getElementByClass('loading').style.display="none";
			 }
		  </script>
   </head>
   <body onload="hideCarga()">
	  <!-- div de carga enquanto carrega o resultado-->
	  <div class="loading" id="carga">
		 <img class="imgloading" src="../../../img/loading.gif">
		   <br/><br/>carregando... Aguarde
	  </div>
   <?php
	  {...}
   ?>
   </body>
</html>

Esse é o código que eu estou usando, já usei essa função javascript em outras páginas que já fiz e deu certo, tem algum erro aí?

 

Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hantaro    1

hantaro
Postado

Faz pelo id da <div>

 

document.getElementById('carga').style.display="none";

Pela class ficaria assim

 

document.getElementsByClassName('loading')[0].style.display='none';

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Faz pelo id da <div>

 

document.getElementById('carga').style.display="none";

Pela class ficaria assim

 

document.getElementsByClassName('loading')[0].style.display='none';

hantaro,

 

Realmente já tentei pegar o elemento pela classe (getElementByClass), pelo nome (getElementByName), e pelo id (getElementById) mas nada, fiz essa mesma div e essa mesma função em outra página e funcionou.

 

Me passou pela cabeça agora o seguinte:

O que acontece na página na verdade é o seguinte, é um formulário simples que após preenchido e submetido ele busca no banco os dados e exibe na tela, enquanto ele fica buscando os dados, a página fica carregando, e é aí que eu preciso que esse div apareça, enquanto a página carrega.

Por acaso, tenho que colocar alguma prioridade no carregamento desse div? ou seja, pra ele carregar antes de todos os elementos da página? se sim, como faço isso, pois talvez o que esteja acontecendo é de ele retornar junto com todos os outros elementos, então nem aparece.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hantaro    1

hantaro
Postado

Essa busca por dados entao deve ser com ajax, se for voce mostra essa div no momento em que se ter um submit ai no seu form, e esconde ele quando a açao tiver concluida ou seja no readyState=4,posta a parte do ajax ai que fica mais facil explicar

 

Nota: usa getElementsByClassName junto

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Dê um flush() na primeira linha do php depois deste div.

Assim alguns browsers vão renderizar ele antes e exibir.

Bem amigos, depois de muita tantativa e erro achei uma solução bacana, lá vai

 

<html>
<head>
	  <title> Pesquisa de dívida cliente móvel</title>
	  <script language=javascript>
			   function showCarga()
			   {
			document.getElementById('carga').style.display="block";
				}
		function hideCarga()
		{
				document.getElementById('carga').style.display="none";
		}
	  </script>
	  <style type="text/css">
				//esse bloco posiciona o div de carga mais ou menos no centro da página e o formata
		.loading{
			display: none;
			background: #FFFFFF;
			position: absolute;
			width: 400;
			height: 200;
			top: 300;
			left: 400;
			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;
		}
	  </style>
</head>
<body onload="java script:hideCarga();">
	<!-- div de carga enquanto carrega o resultado-->
	<div class="loading" id="carga">
		<img class="imgloading" src="loading.gif">
		<br/><br/>buscando... por favor, Aguarde
	</div>

		<form name=formulario method=post OnSubmit="showCarga()" action="<?php echo $_PATH_INFO; ?>">
				   <tr><td align=right><b>Informe o CPF/CNPJ: </b><td>
				   <td align=center><input type=text name=cnpj><td></tr>
				   <tr><td align=center><input type=submit name=Consultar value=Consultar><td>
				   <td align=center><input type=reset name=limpar value=Limpar></td></tr>
			</table>
	  </form>

Ou seja, quando você dá um submit no formulário, mostra o ícone de carga, então, enquanto os valores são buscados no banco esse ícone é exibido.

Depois, assim que os resultados são retornados o div de carga é escondido pelo evento onload na tag <body> que o esconde assim que a página é carregada.

 

Custei mas consegui,

 

Só não tenho certeza se isso funciona se o script php estiver fora da página, mas se quiserem podem testar.

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