Como inserir um "carregando" neste script?
Bom dia.
Estou desenvolvendo um site e consegui um script para fazer a navegação com AJAX e gostaria de colocar um gif de "carregando" sempre que o usuário mudar de página mas não sei como fazer, o script que tenho segue abaixo.
IDEX.HTML
<!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>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<title>Exemplo Estrutura de Site Tableless</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script language="javascript" src="script.js"></script>
</head>
<body>
<div id="todo">
<div id="topo">
<div id="logo"><a href="javascript: void(0);" onclick="ajaxHTMLmiolo('miolo', 'principal');">Principal</a></div>
Aqui pode ser uma imagem de background e um texto. </div>
<div id="meio">
<div id="esquerda">
<div id="menu">
<div><a href="javascript: void(0);" onclick="ajaxHTMLmiolo('miolo', 'principal');">Principal</a></div>
<div><a href="javascript: void(0);" onclick="ajaxHTMLmiolo('miolo', 'empresa');">Empresa</a></div>
<div><a href="javascript: void(0);" onclick="ajaxHTMLmiolo('miolo', 'produtos');">Produtos</a></div>
<div><a href="javascript: void(0);" onclick="ajaxHTMLmiolo('miolo', 'servicos');">Serviços</a></div>
<div><a href="javascript: void(0);" onclick="ajaxHTMLmiolo('miolo', 'contato');">Contato</a></div>
</div>
</div>
<div id="miolo">
<div>Seção 1</div>
<div>Seção 2</div>
<div>Seção 3</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="rodape">
<div id="rodape_direita">
Av. xxx yyy zzz, No 765<br/>
Manaus - AM - CEP: 89000-000<br/>
Email: <a href="mailto:seuemail@seudominio.com.br">seuemail@seudominio.com.br</a> </div>
</div>
</div>
</body>
</html>SCRIPT.JS
function getNewHttpRequest() {
try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(E) {
xmlhttp = false;
}
}
}
return(xmlhttp);
}
oAjax = getNewHttpRequest();//Fila de conexões
fila = [];
ifila = 0;// funcao para altear o conteudo do miolo
function ajaxHTMLmiolo(id, conteudo) {
ajaxHTML(id, 'conteudo.php?conteudo='+conteudo);
}//Executa a próxima conexão da fila
function ajaxRun() {
//Abre a conexão
oAjax.open("GET", fila[ifila][1], true);
//Função para tratamento do retorno
oAjax.onreadystatechange = function() {
if (oAjax.readyState == 4) {
//Mostra o HTML recebido
retorno = unescape(oAjax.responseText.replace(/\+/g, " "));
document.getElementById(fila[ifila][0]).innerHTML = retorno;
//Roda o próximo
ifila++;
if(ifila < fila.length) setTimeout("ajaxRun()", 20);
}
};//Executa
oAjax.send(null);
}
function ajaxHTML(id, url) {//Carregando...
document.getElementById(id).innerHTML="<span class='carregando'>"+"Carregando...</span>";
//Adiciona à fila
fila[fila.length] = [id, url];
//Se não há conexões pendentes, executa
if((ifila+1) == fila.length) ajaxRun();
}CONTEUDO.PHP
<?php
$conteudo = $_GET["conteudo"];
if($conteudo == "principal") {
$fileToRead = "conteudo/inicial.html";
}
else if($conteudo == "empresa") {
$fileToRead = "conteudo/links.html";
}
else if($conteudo == "produtos") {
$fileToRead = "conteudo/produtos.html";
}
else if($conteudo == "servicos") {
$fileToRead = "conteudo/servicos.html";
}
else if($conteudo == "contato") {
$fileToRead = "conteudo/contato.html";
}
$conteudoArquivo = file_get_contents($fileToRead);
print(urlencode($conteudoArquivo));
?>Muito obrigado
Discussão (15)
Carregando comentários...