Loader.gif

[NewsCtba 0]

Pessoal.. to com um probleminha.

 

To usando este código para atulizar um quadro no meu site, porém quando clica e era pra carregar o loader.gif ele não carrega. Eu clico, ele não faz nada, da o tempo de carregar e aparece a página que foi chamada.

 

Segue código:

 

function abrirPag_old(valor){
   var url = valor;

   xmlRequest.onreadystatechange = mudancaEstado;
   xmlRequest.open("GET",url,true);
   xmlRequest.send(null);

       if (xmlRequest.readyState == 1) {
           document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";
       }

   return url;
}

function mudancaEstado(){
   if (xmlRequest.readyState == 4){
       document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
   }
}

function abrirPag(pagina) {
new Ajax.Updater("conteudo_mostrar",pagina);
}

 

Obrigado por enquanto pessoal.

[Jhony ZaM 1]

Ae brother, voce ja tentou criar um funcao de Aguarde, com 1 parametro 0 ou 1 e chama-la no icnio e no fim do ajax, por exemplo 1 aparece a div ou a imagem que voce utiliza como aguarde e 0 desaparece, quando inicia o ajax chame a funcao com valor 1 e quando o ajax terminar chama a funcao com 0 para sumir. Qualquer duvidsa posta ai que faco funcao pra voce...

[NewsCtba 0]

Ae brother, voce ja tentou criar um funcao de Aguarde, com 1 parametro 0 ou 1 e chama-la no icnio e no fim do ajax, por exemplo 1 aparece a div ou a imagem que voce utiliza como aguarde e 0 desaparece, quando inicia o ajax chame a funcao com valor 1 e quando o ajax terminar chama a funcao com 0 para sumir. Qualquer duvidsa posta ai que faco funcao pra voce...

 

cara, não tenho nem idéia de como fazer isso rsrs, tem como você me dar uma mão? vlww pela ajuda

[Jhony ZaM 1]

Brother isto eh relativamente simples...

Crie uma div da seguinte forma.

<div class="aguarde" id="aguarde"></div>

 

Agora coloque o css dela assim:

.aguarde{
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	z-index-99;
	background:#F00;		
}

 

dai manolo cria uma funcao js assim:

 

	function aguarde(modo)
	{
		if (modo == 1)
		{
			document.getElementById('aguarde').style.display = 'block';
		}
		else if(modo == 2)
		{
			document.getElementById('aguarde').style.display = 'none';
		}
	}

 

Bem simples assim...

Agora voce tem uma funcao Ajax, na funcao ajax voce fas assim.

 

	function sua_funcao_ajax()
	{
		//no inicio da funcao chame assim
		aguarde(1);
		//abaixo execute todos os seus devidos recursos ajax


		aki vai seus codigos


		//no final da funcao, no caso a ultima coisa a ser executada vai ser a funcao com parametro 2
		aguarde(2);
	}

Vlw amigo espero que ajude.

 

OBS:Não tive tempo de testar pois estou trabalhando vlw... qualquer duvida posta ai

[NewsCtba 0]

brother, me desculpe a ignorância, mas o que exatamente esta função vai fazer, pois não sei onde nela entra o loader.gif rsrsrs

 

então, eu testei dai mas não consegui.. em qual dos arquivos eu chamo essa funcão que você me falou:

 

esse:

http://www.softnews.com.br/teste/prototype.js

 

ou esse:

http://www.softnews.com.br/teste/sint.js

 

mas uma vez desculpe e agradecidissimo pela sua atenção

[Jhony ZaM 1]

Assim, quando voce clica para executar algo voce chama um funcao nao chama?

Pois bem vamos izer que voce chama a funcao tal.

 

dentro da funcao tal voce chama a funcao aguarde.

A funcao aguarde exibe uma div em branco ou uma div da forma que voce quiser enquanto estiver carregando.

e no final da funcao tal ela eh chamada novamente com o parametro 2 para desaparecer a div.

 

Se nao conseguir, eu fasso um exmplo pratico pra voce e postoi o codigo. vlw

 

OBS: fas assim;

 

function abrirPag_old(valor){
   aguarde(1);
   var url = valor;

   xmlRequest.onreadystatechange = mudancaEstado;
   xmlRequest.open("GET",url,true);
   xmlRequest.send(null);

       if (xmlRequest.readyState == 1) {
           document.getElementById("conteudo_mostrar").innerHTML = "<img src='loading.gif'>";
       }

   return url;
}

function mudancaEstado(){
   if (xmlRequest.readyState == 4){
       document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
   }
   aguarde(2);
}

function abrirPag(pagina) {
new Ajax.Updater("conteudo_mostrar",pagina);

}

 

 

Amigo uma coisa, seu ajax ta meio estranho pra mim porem acho que seria isso.

[NewsCtba 0]

Olha amigo, tentei te juro que tentei rsrs mas não consegui.

 

Olha o arquivo básico que fiz para testar:

http://www.softnews.com.br/teste/teste.html'>http://www.softnews.com.br/teste/teste.html

 

Aqui estão os arquivos que eu usei:

http://www.softnews.com.br/teste/

 

Numa dessa seus olhos enxergam o que o meu não está enxergando. hehehehe

[Jhony ZaM 1]

Dei uma alterada no script para ve se voce intende, leia os comentarios...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>Teste Ajax</title> 
<script language="javascript" src="prototype.js"></script> 
<script language="javascript" src="sint.js"></script> 
<script language="Javascript"> 

//Funcao que ira fazer aparecer ou sumir a div
function aguarde(modo)
{
if (modo == 1)
   {
	document.getElementById('aguarde').style.display = 'block';
   }
   else if(modo == 2)
   {
	document.getElementById('aguarde').style.display = 'none';
   }
}

//uma funcao qualquer, colei um set iterval para voce intender ele nao deve ser usado. Nesta funcao eu chamo o aguarde com parametro 1 que exibira o aguarde, a funcao continua sendo executada, e ao xegar no fim da funcao ela chama o aguarde com parametro 2 para desaparecer  DIV, eh simples d+
function abrirPag()
{
aguarde(1);
var intervalo = setInterval(function() {
aguarde(2);	}, 1000);
}

</script> 
<style type="text/css"> 
.aguarde{
   width:100%;
   height:100%;
   display:none;
   position:fixed;
   z-index-99;
   background:#F00;                
}
</style> 

</head> 

<body> 

<a href="#" onclick="abrirPag();">Link1</a> 

<br /><br /> 

<a href="#" onclick="abrirPag();">Link2</a> 

<br /><br /> 

<div id="conteudo_mostrar"> 
 <div class="aguarde" id="aguarde"> 
 </div> 
</div> 

</body> 
</html> 

 

Outra coisa amigao, se voce estiver tentando abri uma outra pagina, atraves de html ou php, e nao JS ou Ajax isso nao eh o metodo certo ok...

Aguardo informacoes vlw.

[NewsCtba 0]

Então amigo, demorei mas estou aqui novamente.

 

Até consegui fazer funcionar o loader.gif, porém dai ele só abre a primeira página que foi clicada.

 

Como não tenho muito conhecimento estou me batendo muito. Mas está ótimo, agradeço a sua atenção, obrigado mesmo pela ajuda.