Ir para conteúdo

POWERED BY:

Arquivado

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

Leandro Persi

Adcionando gif de carregando no AJAX/Jquery

Por , em Javascript

Recommended Posts

Leandro Persi    0

Leandro Persi
Postado

Boa tarde.

Estou desenvolvendo um site em Ajax e utilizando algumas coisas em Jquery e tenho uma função que administra todos os links e também faz aparecer a palavrra "carregando" sempre que uma página será aberta. Eu gostaria de mudar essa palavra por um Gif Animado mas não sei com fazer. Abaixo segue o script.

 

ATENÇÃO PARA A PRIMEIRA LINHA E LINHA BEFOURESEND QUE É ONDE ESTA A PALAVRA CARREGANDO

 

//Funcao Padrao do JQuery

$(document).ready(function(){

 

 

$("#carregando").hide();

$("#index").click(function(){

 

$.ajax({

type: "GET",

url: "inicial.php",

dataType: "script",

beforeSend: function(){

$("#conteudo").html("<b>Carregando...</b>");

//$("#carregando").show();

},

success: function(data){

//alert("Conteudo " + msg);

$("#conteudo").html(data);

}

});

});

 

$("#projetos").click(function(){

 

$.ajax({

type: "GET",

url: "pages/artistas.htm",

dataType: "script",

beforeSend: function(){

$("#conteudo").html("<b>Carregando...</b>");

//$("#carregando").show();

},

success: function(data){

//alert("Conteudo " + msg);

$("#conteudo").html(data);

}

});

});

 

 

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é um retorno do tipo innerHTML.. coloca o img lá..

<b>Carregando...</b>

por:

<img src="animado.gif" alt="" />

 

Melhor seria postar no fórum de JS ne?!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcio Leandro    0

Marcio Leandro
Postado

Leandro, isso ai é Javascript e não PHP ...

 

Tópico movido : PHP=>Javascript

Compartilhar este post

Link para o post
Compartilhar em outros sites

wst    0

wst
Postado

olá!

 

Estou com problema com um gif de carregando ele fica congelado no jquery no IE lixo! No firefox fica normal !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Veja como estou fazendo. Acho q pode te ajudar.

Detalhes: Script jquery menor, com o conteúdo geral em apenas uma página .

 

 

index:

<html>
<head>
<title>includes com ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#inicial 
{
position:absolute;
top:25px;
left:372px;
font: 13px "Trebuchet MS", Tahoma, Verdana;	
text-align:center;	
border: 1px solid #003E00; 	
width:68px;  
height:18px;	
display:block;
cursor:hand;
}
#empresa 
{
position:absolute;
top:25px;
left:444px;
font: 13px "Trebuchet MS", Tahoma, Verdana;	
text-align:center;	
color:#003E00;
border: 1px solid #003E00; 	
width:68px;  
height:18px;	
display:block;
cursor:hand;
}
#carregando 
{
position:absolute;
top:25px;
left:694px;
font: 13px "Trebuchet MS", Tahoma, Verdana;	
text-align:center;	
color:red;
width:88px;  
height:18px;	
display:block;
cursor:hand;
}
.alvo 
{
position:absolute;
top:60px;
left:200px;
font: 13px "Trebuchet MS", Tahoma, Verdana;	
text-align:center;	
color:#003E00;
border: 1px solid #003E00; 
width:600px;  
height:300px;	
display:block;
cursor:hand;
}
</style>

<script type="text/javascript" src="jquery.js"></script>
<!-- Início do código usado pela biblioteca acima -  jQuery -->
<script type="text/javascript">

$(document).ready(function(){
	$("#carregando").hide();
		$("#menu div").click(function(){	
			$("#carregando").ajaxStart(function(){$(this).show();});
			$("#carregando").ajaxStop(function(){$(this).hide();});
			
			var id = $(this).attr("id");
			$.post("conteudo.php",{id:id}, function(data) {
			$(".alvo").empty().html(data);
			});
			
			$().ajaxError(function(){$(".alvo").empty().text("erro");});

return false;
		});
});
</script>
</head>
<body>
  <!-- Menus -->
<div id="menu">
<div id="inicial">Inicial</div>
<div id="empresa">Empresa</div>
</div>
	  <!-- Carregando -->
<div id="carregando"><img src="load.gif">carregando...</div>
  
<div class="alvo"><!-- Alvo -->
alvo
</div>
</body>
</html>

conteúdo php:

 

<?
sleep(5);/*   
deixe essa função apenas para testar o carregando, caso seu teste seja feito num servidor local. Ela atrasa em 5 segundos a leitura dessa página
*/

if(empty($_POST['id']))
{
die("erro");
}
$id = $_POST['id'];

header("Content-Type: text/html; charset=ISO-8859-1",true);

switch ($id) {
	case 'inicial':
echo <<<EOD
conteúdo inicial
EOD;
		break;
	
	case 'empresa':
echo <<<EOD
conteúdo empresa
EOD;
		break;

}
?>

Abraço e Deus te abençoe!

Compartilhar este post

Link para o post
Compartilhar em outros sites

wst    0

wst
Postado

Meu código congelado o gif no IE .... engraçado que no firefox, chrome e no safari roda normal o gif!

 

Alguem sabe o que pode ser? :(

 

 

Daniel obrigado pela dica adicionei o comando dai fica mais fácil para eu testar se funcionou ou não...

 

adicionei a linha sleep(5);

 

Agora preciso descobrir porque no IE viadinho não funciona

Compartilhar este post

Link para o post
Compartilhar em outros sites

wst    0

wst
Postado

pow Daniel valeu cara! Era a porcaria do gif que funcionava em todos os browsers menos no IE... não sei como ...

 

Mais peguei esse do site funcionou...

 

Outra não tem nada haver isso... bizarro... porque funciona em outro site meu o gif no IE... so Deus sabe o que é!

Compartilhar este post

Link para o post
Compartilhar em outros sites

wst    0

wst
Postado

pareceu que tinha funcionado mais quando upa pra net fica lento e problema no post... do jquery que está pesado e trava o gif so que so acontece no IE :/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Mano. nessa altura do campeonato, se bem que já terminou com o Coringão campeão, hehe, eu testaria o conteúdo online em outro pc e/ou reinstalaria o ie. Se quiser manda o endereço online pra testa aqui na minha máquina. obs: caso esteja usando js puro não se esqueçã que algumas funções nao funcionam no ie e vice-versa

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