[Resolvido] Fazer Loading com Jquery

[LeozinCuiabá 7]

Boa Tarde Galera, estou tentando criar um loading com uma imagem gif com ajax, porém todos os metódos na internet não estão muito bem explicados, muita coisa eles deixam implicito, então gostaria de uma ajuda dos colegas.

 

Toda vez que o usuario clicasse em algum link, eu gostaria que aparecesse o gif de loading, acredito que é fácil porque eu já consegui fazer com um alert do javascript, mas não sei fazer com uma imagem.

 

Obrigado desde já.

[LeozinCuiabá 7]

Pessoal já consegui solucionar, depois de muita luta. segue a solução abaixo.

 

1º criamos uma pagina .html ou php e importamos a biblioteca jquery para dentro do documento.

vocês podem reparar que criei e importei um arquivo javascript externo chamado load.js, por questão de organização.

<script src="js/load.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>

2º criamos uma div, que eu chamei de conteudo, e criei um link dentro dela, e o endereco desse link está dentro de uma funcao chamada loading. essa referida função está no arquivo load.js.

<div id="conteudo">

<a href="javascript:loading()">Contato</a>

</div>

 

3º dentro do arquivo load.js colocamos o seguinte codigo

function loading() {
/* Assim que o documento estiver pronto */
$(document).ready(function() {
$("a").click(function(event) { /* No evento click da tag (a) */
$('#conteudo').html('<img src="images/loader.gif">'); /* Dentro da div conteudo ele irá adicionar a seguinte imagem */	
$('#conteudo').load('contato.php',aviso()); /* Quando ele terminar de carregar o arquivo contato.php ele some com a imagem e mostra o conteudo */
}); /* Fecha evento click do mouse */
}); /* Fecha Funcao Loading */

function aviso(){
alert ('Conteudo será carregado agora!'); /* Cria uma caixa de mensagem exibindo um aviso */
}
} 

 

Bem pessoal, como voces podem ver é bem simples e tem vários tutoriais complicados na net e sem comentarios no codigo. consegui um bom exemplo na internet e criei esse tuto, vlw galera até mais !

[William Bruno 1501]

Um outro exemplo, que postei já tem um tempo no meu blog:

http://wbruno.com.br/blog/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/