Peguei esses exemplos na internet:
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 */
}
}
Tem mais esses
jQuery(document).ready(function($){var loader =new Loader('#noticias',{
showProgress:true,
showProgressText:true,
overlayColor:'#0B274C',
progressColor:'#F6911E'});
loader.Start();});
e esse
jQuery(document).ready(function($){var loader =new Loader('#escopo',{
showProgress:true,
showProgressText:true,
textSize:20,
userCallback:showContent
});
loader.Start();});
Espero que ajude. Qualquer coisa é só falar.
