Ir para conteúdo

POWERED BY:

Arquivado

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

Didiron

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

Recommended Posts

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á.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.