Como exibir gif animado enquanto carrega registros do banco de dados?

[Didiron 0]

Olá pessoal, desculpe caso esta seja uma pergunta retórica, mas pesquisei na internet e não consegui achar um exemplo que satisfaça minhas necessidades.

 

Tenho uma tabela, que traz uma série de registros do banco de dados e percebo que todo o site carrega e a tabela demora em torno de uns 7 segundos para aparecer com os registros, e então eu queria exibir um gif animado enquanto ele carrega todos os registros. A imagem do gif eu já tenho só não sei como utilizá-lo, alguem conseguiria me ajudar?

 

<table width="80%" border="1" bordercolor="#EBECEE" align="center" cellpadding="0" cellspacing="0">
                  <tr class="bg-tabela">
                    <td colspan="7">Documentos</td>
                  </tr>
                  <tr class="bg-tabela2">
                    <td width="3%">E</td>
                    <td width="2%">A</td>
                    <td width="5%">Tipo</td>
                    <td width="56%"> Título</td>
                    <td width="12%">Tamanho</td>
                    <td width="11%">Data</td>
                    <td width="11%">Modo</td>
                  </tr>
                      <?php
	       [color="#8B0000"][b]AQUI EU GOSTARIA DE EXIBIR A IMAGEM E ELA SÓ DESAPARECESSE QUANDO CARREGASSE TODOS OS REGISTROS[/b][/color]
                      //Verifica a categoria selecionada
                      $link_categoria = $_GET['categoria_selec'];

				   //Quantidade de arquivos exibido por página
				   $quantidade = 18;

				   //Verifica em qual página estamos
				   if(isset($_POST['paginaSolicitada']) && $_POST['paginaSolicitada'] == "ok"){
				   		$pagina = $_POST['pagina'];
				   }else{
						$pagina = (isset($_GET['pagina'])) ? (int)$_GET['pagina'] : 1;
				   }

				   //Cria o indice de inicio da paginação
				   $inicio = ($quantidade * $pagina) - $quantidade;

				   //Verifica qual select a exibir
                      if(isset($link_categoria)){
                           $SQLarquivos = mysql_query("SELECT * FROM arquivos WHERE id_categoria='$link_categoria' ORDER BY id desc LIMIT $inicio,$quantidade");
                      }elseif(isset($_POST['pesquisa']) && $_POST['pesquisa'] == "ok"){
				   	   $pesquisa = $_POST['txt_pesquisa'];
					   $SQLarquivos = mysql_query("SELECT * FROM arquivos WHERE nome LIKE '%$pesquisa%' ORDER BY id desc LIMIT $inicio,$quantidade");
				   }else{
					   $SQLarquivos = mysql_query("SELECT * FROM arquivos ORDER BY id desc LIMIT $inicio,$quantidade");
                      }

				   //veririca se há arquivos cadastrados
                      if(mysql_num_rows($SQLarquivos) == 0){
                          echo '<tr><td colspan="7"><img src="imagens/layout/transparente.png" valign="middle" width="18" height="18" />Não há arquivos cadastrados para este requisito.</td></tr>';
                      }else{
                          while($lista_arquivos = mysql_fetch_array($SQLarquivos)){

							//Verifica a categoria do arquivo
							$categoria = $lista_arquivos['id_categoria']; 
							$modo_armazenamento = $lista_arquivos['tipo']; 
						    $selec_categoria = mysql_query("SELECT * FROM categorias WHERE id='$categoria'");
							$lista_categoria_selec = mysql_fetch_array($selec_categoria);
							$nome_categoria_selecionada = $lista_categoria_selec['nome'];

							//Verifica o modo de armazenamento do arquivo
							if($modo_armazenamento == 1){
								$destino_arquivo = "C:/Users/Dionei/Dropbox/".$nome_categoria_selecionada."/";
							}else{
								$destino_arquivo = "C:/Users/Dionei/Documents/Arquivos/".$nome_categoria_selecionada."/";	
							}

							$arquivo_exibir = $destino_arquivo.$lista_arquivos['arquivo'];
                      ?>
                          <tr style="cursor: hand;">
                            <td><input type='checkbox' name='arquivo_excluir[]' value="<?php echo $lista_arquivos['id']; ?>" /></td>
                            <td><input type="radio" name="editar" class="radio" value="<?php echo $lista_arquivos['id']; ?>" /></td>
                            <td onDblClick="location.href = '?nome_arquivo=<?php echo $arquivo_exibir; ?>';"><img src="imagens/icones_arquivos/<?php echo $lista_arquivos['imagem']; ?>" width="17" height="16" /></td>
                            <td onDblClick="location.href = '?nome_arquivo=<?php echo $arquivo_exibir; ?>';" title="Clique duas vezes sobre o arquivo para abri-lo"> <?php echo $lista_arquivos['nome']; ?></td>
                            <td onDblClick="location.href = '?nome_arquivo=<?php echo $arquivo_exibir; ?>';"><?php if($lista_arquivos['arquivo'] <> ''){echo TamanhoArquivo($arquivo_exibir);}else{echo "Sem Arquivo";} ; ?></td>
                            <td onDblClick="location.href = '?nome_arquivo=<?php echo $arquivo_exibir; ?>';"><?php echo $lista_arquivos['data']; ?></td>
                            <?php
						 //Verifica o modo de armazenamento a exibir para o usuário
                            $modo = $lista_arquivos['tipo'];
                            if($modo == 1){
                                $modo_armazenamento = "Dropbbox (Online)"; 
                            }else{
                                $modo_armazenamento = "Offline"; 
                            }
                            ?>
                            <td onDblClick="location.href = '?nome_arquivo=<?php echo $arquivo_exibir; ?>';"><?php echo $modo_armazenamento; ?></td>
                          </tr>               
                      <?php
                          }
                      }
               ?>
           <table>

 

Alguem poderia me ajudar nisso?

Muito obrigado desde já.

[iRCC 0]

Uma alternativa seria na parte de cima da página, onde você escreve documentos, colocar uma mensagem dizendo que está carregando e então no onload da página mudar a mensagem para somente Documentos.

 

O onload que falo seria o mesmo que o document.ready do jquery.

[Didiron 0]

Ok iRCC, mas eu bgostaria que aparecesse o gif animado enquanto carrega e não texto, desculpe mas não tenho conhecimentos em JQuery..

[Didiron 0]

Procurando aqui no fórum achei um srcipt utilizado a partir do script de outro usuário.

$(document).ready(function() {
   $("#enviar").click(function() {

        $('#loading').ajaxStart(function(){
              $('#loading').show();   
        });
        $('#loading').ajaxStop(function(){
              $('#loading').hide();   
        });
    });
});

Entendi que teria que criar uma div com id="carregando" com a imagem do gif. Mas se for ver, o código só funcionará caso clicasse num input com id="enviar". Mas como fazer isso somente quando iniciar a consulta no banco de dados? Conforme o código que postei na minha primeira dúvida.