Ir para conteúdo

POWERED BY:

Arquivado

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

Spyder.RV

Indicador de Carregamento

Recommended Posts

Tenho uma aplicação que está levando um tempo considerável devido à quantidade de dados que é lida.Como fazer para mostrar um indicador que os dados estão sendo carregados.Ex:Carregando... Aguarde, etc...Valeu

Compartilhar este post


Link para o post
Compartilhar em outros sites

uhnn, você pode usar uma camada com uma msg q os dados estão sendo carregados, quando finalizar está camada desaparece, mas isso seria: JS!

 

Abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta isto:

 

<html><head><script language="jscript"><!--function apaga(){document.all["carrega"].innerHTML = '';}--></script></head><body><span id="carrega">Aguarde, carregando</span>Sua página<script>apaga();</script></body></html>

Flw

Compartilhar este post


Link para o post
Compartilhar em outros sites

Testei o código acima na seguinte página: http://www.caengim.com.br/ e funcionou da maneira que queria, porém ele pode desaparecer mesmo quando as imagens ainda não estão carregadas, pois o código foi feito para a mensagem "Aguarde" sumir quando chegar naquele trecho, mesmo assim é perfeito quando se carrega grande quantidade de texto.

 

Só testei no Internet Explorer!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Outro modo de se fazer Neston... :P

 

PS: Só testei no Firefox, mas ... creio eu que funcione em qualquer navegador que suporte JS. :rolleyes:

 

<html><head>...<style type="text/css">.hide{  display: none;}.show{  display: block;}</style>...<script type="text/javascript">function displayContent(){  document.getElementById('loading').className = 'hide';  document.getElementById('content').className = 'show';}</script>...</head><body onload="javascript: displayContent();">...<div id="loading" class="show">Carregando ...</div>...<div id="content" class="hide">Conteúdo</div>...</body></html>
[]s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Outro modo de se fazer Neston... :P

 

PS: Só testei no Firefox, mas ... creio eu que funcione em qualquer navegador que suporte JS.  :rolleyes:

 

<html><head>...<style type="text/css">.hide{  display: none;}.show{  display: block;}</style>...<script type="text/javascript">function displayContent(){  document.getElementById('loading').className = 'hide';  document.getElementById('content').className = 'show';}</script>...</head><body onload="javascript: displayContent();">...<div id="loading" class="show">Carregando ...</div>...<div id="content" class="hide">Conteúdo</div>...</body></html>
[]’s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

<{POST_SNAPBACK}>

Rodou perfeitamente no Firefox. Só que no IE não tá dando certo. A tela fica branca até os dados terminarem de carregar e aparecer.

 

To usando php/mysql pra mostrar os dados. Essa p$ææ@ do IE eh uma m...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Testei o código acima na seguinte página: http://www.caengim.com.br/ e funcionou da maneira que queria, porém ele pode desaparecer mesmo quando as imagens ainda não estão carregadas, pois o código foi feito para a mensagem "Aguarde" sumir quando chegar naquele trecho, mesmo assim é perfeito quando se carrega grande quantidade de texto.

 

Só testei no Internet Explorer!

<{POST_SNAPBACK}>

Mesma coisa... Funcionou no Firefox, mas no ie fica uma página em branco e só mostra quando a página é completamente carregada.

To usando php/mysql pra mostrar os dados.

 

Mais uma vez eu digo: Essa p$ææ@ do IE eh uma m... http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Rodou perfeitamente no Firefox. Só que no IE não tá dando certo. A tela fica branca até os dados terminarem de carregar e aparecer.

 

To usando php/mysql pra mostrar os dados. Essa p$ææ@ do IE eh uma m...

<{POST_SNAPBACK}>

Opa ... ;)

 

Amigo ... fui tirar esse peso de minha consciência, e para minha surpresa, funcionou perfeitamente. Para efetuar o teste, coloquei uns 50 KB de texto no arquivo, e upei para um servidor de testes meu na Web. Tanto pelo FF e pelo IE, funcionou como o esperado ! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]’s :D

Compartilhar este post


Link para o post
Compartilhar em outros sites

cOdeman, eu peguei os exemplos de ppp e fiz alguns testes. Novamente, no FF rodou normalmente, mas no IE fica na mesma: Só mostra os resultados quando termina de rodar todo o código.

 

To postando o código aqui pro pessoal dar uma olhada. Ainda tá misto de HTML com PHP! Este seria o último ajuste na página e daí iria otimizar a mesma pra ficar com uma cara melhor (e até quem sabe mais rápida)!!!

 

<?   require_once("valsessao.php");   echo "<script language=\"javascript\">if (top == self)\n\ttop.location = \"index.php?MenuItem=2\";</script>";   function F_COD_Convenio($Valor)   {      // 000.000      if ($Valor < 10)         $saida = "00000" . $Valor;      else if ($Valor < 100)         $saida = "0000" . $Valor;      else if ($Valor < 1000)         $saida = "000" . $Valor;      else if ($Valor < 10000)         $saida = "00" . $Valor;      else if ($Valor < 100000)         $saida = "0" . $Valor;      else         $saida = $Valor;      $saida = substr($saida, 0, 3) . "." . substr($saida, 3, 3);       return($saida);   }      function saidaStatus($Lancado, $Assinatura)   {      echo ($Lancado != 'S'? "REALIZANDO": ($Assinatura == NULL? "DIGITADO":"LIBERADO"));   }   function formataStatus($Lancado, $Assinatura)   {      echo ($Lancado != 'S'? "stRealizando": ($Assinatura == NULL? "stDigitado":"stLiberado"));   }      function formatData2000($strData)   {      //2005-08-25      //0123 56 89      $nAno = substr($strData, 0, 4);      $nMes = substr($strData, 5, 2);      $nDia = substr($strData, 8, 2);            return ($nDia . "/" . $nMes . "/" . $nAno);   }   ?><html>   <head>   <title>Seção do Usuario</title>   <link href="hormonal.css" rel="stylesheet" type="text/css">   <script language="JavaScript" type="text/JavaScript"><!--function MM_reloadPage(init) {  //reloads the window if Nav4 resized  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//-->    </script>   </head>   <!-- <body class="bodyContent" <? echo(" onload=\"" . ($_POST[Filtrado] == 1? "Mostra('Carregando', 1)":"") . "\""); ?>"> -->   <body class="bodyContent" onload="apaga();"><div id="Help" style="position:absolute; left:99px; top:3px; width:538px; height:64px; z-index:0; background-color: #FFF7DD; layer-background-color: #FFF7DD; border: 1px none #000000; visibility: hidden;" class="subMenu" onMouseOut="Mostra('Help', 0);">  <table width="100%" border="0" cellpadding="0" class="subMenu" style="border-width: 2px; border-style: dashed; border-color: #cccccc;">    <tr>      <td>Para melhor rapidez na exibição dos laudos, selecione        os filtros abaixo e clique em <b>Mostrar.</b><br>      <b><i>Lembre-se:</i> 1</b>. A velocidade em que as informações      serão mostradas, vai depender do conjunto de filtros que você selecionar.<br>          <b>2.</b> Somente laudos cadastrados após o dia 00/00/0000 estão          disponíveis na internet.<br>      <b>3.</b> Serão mostrados todos os registros disponíveis      a partir da data selecionada.</td>    </tr>  </table></div><table width="729" height="100%" border="0" cellpadding="0" cellspacing="0" class="tbHormonal">     <!--DWLayoutTable-->     <tr>       <td height="15" valign="top" class="subMenu"><b>Laudos on-Line</b>! <a href="#">Acompanhar</a>         | <a href="logout.php">Encerrar           Seção</a> | <a href="#" onClick="javascript:Mostra('Help', 1)">Ajuda</a></td>      </tr>     <tr>       <td height="52" align="center" valign="top" class="subMenu">Para melhor         rapidez na exibição         dos laudos, selecione os filtros abaixo e clique em <b>Mostrar.</b><br>         <b><i>Lembre-se:</i> 1</b>. A velocidade em que as informações         serão mostradas, vai      depender do conjunto de filtros que você selecionar.<br>      <b>2.</b> Somente laudos cadastrados após o dia 00/00/0000      estão disponíveis na internet.<br>      <b>3.</b> Serão mostrados todos os registros disponíveis a      partir da data selecionada.</td>     </tr>     <form action="" name="frmFiltro" id="frmFiltro" method="post">     <tr>       <td height="25" align="left" valign="middle" class="subMenu">  Mês:          <select name="chMonth" class="Campo" id="chMonth">        <?           $intMonth = ($_POST[chMonth] == NULL ? date("n") : $_POST[chMonth]);         $nMes[0] = ""; $nMes[1] = "Janeiro"; $nMes[2] = "Fevereiro"; $nMes[3] = "Março";         $nMes[4] = "Abril"; $nMes[5] = "Maio"; $nMes[6] = "Junho"; $nMes[7] = "Julho"; $nMes[8] = "Agosto";         $nMes[9] = "Setembro"; $nMes[10] = "Outubro"; $nMes[11] = "Novembro"; $nMes[12] = "Dezembro";           for($i = 1; $i <= 12; $i++)            print "\t\t\t<option value=\"$i\"" .                 ($i == $intMonth ? " selected": "") .                 ">$nMes[$i]\n";        ?>        </select>            Dia:          <select name="chDay" class="Campo" id="chDay">        <?           $intDay = ($_POST[chDay] == NULL ? date("j") : $_POST[chDay]);           for($i = 1; $i <= 31; $i++)            print "\t\t\t<option value=\"$i\"" .                  ($i == $intDay ? " selected": "") . ">$i\n";         ?>          </select>            Ano:          <select name="chYear" class="Campo" id="chYear">        <option value="2004" selected>2004          <option value="2005" selected>2005          </select>            Convênio:           <select name="chConvenio" class="Campo" id="chConvenio">             <option value="0"><Todos>          <?             $intConv = ($_POST[chConvenio] == NULL) ? 0:$_POST[chConvenio];            if (isset($_SESSION['DIREITOS_Usuario']))            {               $Convenios = explode( "|", $_SESSION['DIREITOS_Usuario'] );               $SQL_Where = "";               for($i = 0; $i < sizeof($Convenios); $i++)               {                  settype($Convenios[$i], "int");                  $SQL_Where = $SQL_Where . " codigo = '$Convenios[$i]'" .                             ($i < sizeof($Convenios)-1 ? " or":"");               }                              include("secdata.inc");                  mysql_connect($hHost, $hUser, $hSenha) or die($xDie);               mysql_select_db($hBanco) or die($xDie);               // Abre Usuario               $SQL_Cod= "SELECT codigo, convenio FROM convenios WHERE $SQL_Where ORDER by convenio;";               $hConsulta = mysql_query($SQL_Cod) or die($xDie);               while($hDados = mysql_fetch_array($hConsulta))               {                  echo "\t\t\t\t<option value=\"" . $hDados['codigo'] . "\"" .                       ($hDados['codigo'] == $intConv ? "Selected":"") . ">" .                       $hDados['convenio'] . "\n";                }             }          ?>        </select>          <input type="hidden" name="Filtrado" value="1">        <input type="button" name="Submit" value="Mostrar" class="btHormonal" onClick="ValidaFiltros();">       </td>        </tr>     </form>     <tr>       <td align="center" valign="top"><span id="carrega"><span class="Cabecalho_Campo"><font color="#CC0000">Carregando dados            solicitados...</font></span><span class="dadosRotina"><font color="#000066"><br>            <br>            Dependendo do conjunto de filtros escolhidos,            esta operação levar        um tempo maior para ser concluída</font></span></span><?         if ($_POST[Filtrado] == 1)         {            MostraConvenios(&$Convenios);//            echo "<script language=\"javascript\">Mostra('Carregando', 0);</script>";         }      ?>       </td>  </tr>    </table>   </body></html><script language="javascript">   function ValidaFiltros()   {      nDia = document.frmFiltro.chDay.value;      nMes = document.frmFiltro.chMonth.value;      nAno = document.frmFiltro.chYear.value;      nConvenio = document.frmFiltro.chConvenio.value;            var daysPerMonth = new Array(13);      var daysString = new Array(13);      Saida = "";            daysPerMonth[0]  = 0;   daysString[0]  = "";      daysPerMonth[1]  = 31;   daysString[1]  = "Janeiro";      daysPerMonth[2]  = 29;   daysString[2]  = "Fevereiro";      daysPerMonth[3]  = 31;   daysString[3]  = "Março";       daysPerMonth[4]  = 30;   daysString[4]  = "Abril";      daysPerMonth[5]  = 31;   daysString[5]  = "Maio";      daysPerMonth[6]  = 30;   daysString[6]  = "Junho";      daysPerMonth[7]  = 31;   daysString[7]  = "Julho";      daysPerMonth[8]  = 31;   daysString[8]  = "Agosto";      daysPerMonth[9]  = 30;   daysString[9]  = "Setembro";      daysPerMonth[10] = 31;   daysString[10] = "Outubro";      daysPerMonth[11] = 30;   daysString[11] = "Novembro";      daysPerMonth[12] = 31;   daysString[12] = "Dezembro";                        // Verifica se o dia informado bate com o último dia de cada mês      if (nDia > daysPerMonth[nMes])   // Se dia for maior que o ultimo dia de cada mês         Saida += daysString[nMes] + " tem no máximo " + (nMes == 2 ? daysPerMonth[nMes]-1 + "/" + daysPerMonth[nMes]: daysPerMonth[nMes]) + " dias";      else   // Verificar fevereiro         if (nMes == 2 && nDia == 29)   // Se Mês for fevereiro (2), verifica bisexto            if (!(nAno % 4 == 0 && nAno % 100 != 0 || nAno % 400 == 0))               Saida += "*** VOCÊ ESCOLHEU UMA DATA INVÁLIDA ***\n\n" + nAno + " não é ano bissexto\n\n" +                      "Favor mudar a data";      if (Saida != "")      {         alert(Saida);         document.frmFiltro.chMonth.focus();      }      else      {         // Verifica se foi selecionado algum convênio:         if (nConvenio == 0)   // Selecionado <Nenhum>         {            Saida = "*** VOCÊ NÃO SELECIONOU UM CONVÊNIO PARA O FILTRO ***\n\nSe um convênio não for selecionado para filtrar os dados,\n" +                    "esta operação pode levar um tempo maior para ser concluída!!!\n\n" +                   "Continuar assim mesmo?";            if(confirm(Saida))               document.frmFiltro.submit();            else               document.frmFiltro.chConvenio.focus();         }         else            document.frmFiltro.submit();      }   }</script><?   function MostraConvenios($Convenios)   {      // Código a ser montado para o status dos Laudos      // Codigo para Convenios - Campos: Código, Convenio, Cidade, UF      include("secdata.inc");         mysql_connect($hHost, $hUser, $hSenha) or die($xDie);      mysql_select_db($hBanco) or die($xDie);            // Abre Convênios do Usuário      for($i = 0; $i < ($_POST[chConvenio] != 0 ? 0: sizeof($Convenios)); $i++)         $SQL_Where = $SQL_Where . " codigo = '$Convenios[$i]'" .                    ($i < sizeof($Convenios)-1 ? " or":"");      $SQL_Cod= "SELECT Codigo, Convenio, Cidade, UF FROM convenios WHERE " .               ($SQL_Where == "" ? "codigo = " . $_POST[chConvenio] :  $SQL_Where) .               ";";      $hConsulta = mysql_query($SQL_Cod) or die($xDie);            // Loop em Convenios      $Saida = "";      while ($hDados= mysql_fetch_array($hConsulta))      {         if (ob_get_level() == 0)            ob_start();                  // Gera a Tabela?>   <table width="700" border="0" cellpadding="1" cellspacing="0"  style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;">   <tr>      <td height="25" style="border-bottom-width: 2px; border-bottom-style: dashed; border-bottom-color: #000000;" colspan="6" valign="middle" class="Cabecalho_Campo"><b>      <?          $CodigoX = F_COD_Convenio($hDados['Codigo']);          echo("$CodigoX - " . $hDados['Convenio'] . " - " . $hDados['Cidade'] . "-" . $hDados['UF']);      ?></b></td>      </tr>         <?         // Codigo para Pedidos - Campos: Pedido, Guia, Data, Paciente         $filtroCodigo = $hDados['Codigo'];         $filtroData   = $_POST[chYear] . "-" . $_POST[chMonth] . "-". $_POST[chDay];               $SQL_Cod= "SELECT pedidos_master.Pedido, pedidos_master.Data, pacientes.Paciente FROM " .                 "pacientes INNER JOIN pedidos_master ON " .                  "pacientes.Codigo = pedidos_master.CodPaciente WHERE " .                 "pedidos_master.CodPaciente = pacientes.Codigo AND " .                  "pedidos_master.CodConvenio = '$filtroCodigo' AND " .                 "pedidos_master.Data >= '$filtroData' " .                 "ORDER BY pedidos_master.Data, pedidos_master.Pedido;";                       $hConsulta_Pedidos = mysql_query($SQL_Cod) or die($xDie);         if (mysql_affected_rows() == 0)         {            // Indica que não tem lançamentos(laudos)?>        <tr>           <td width="702" height="20" align="center" valign="middle" bgcolor="#FFFFFF" class="subMenu" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;">            Não existem laudos no período informado!!!         </td>       </tr><?         }         else         {            // Cabeçalho de Requisições?>        <tr>          <td width="20" height="20" valign="middle"> </td>           <td width="55" height="20" align="center" valign="middle" bgcolor="#FFEEDD" class="Cabecalho_Campo" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;">REQ.</td>           <td width="82" height="20" align="center" valign="middle" bgcolor="#FFEEDD" class="Cabecalho_Campo" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;">REGISTRO</td>           <td width="80" height="20" align="center" valign="middle" bgcolor="#FFEEDD" class="Cabecalho_Campo" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;">DATA</td>          <td width="465" height="20" valign="middle" bgcolor="#FFEEDD" class="Cabecalho_Campo" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;">PACIENTE</td>       </tr><?               }         // Loop para Pedidos         $Saida = "";         while ($hDados_Pedidos= mysql_fetch_array($hConsulta_Pedidos))         {      ?>        <tr>          <td width="20" height="15" valign="middle"> </td>          <td width="55" height="15" align="center" valign="middle" bgcolor="#FFEEDD" class="dadosRotina" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;">000.000</td>          <td width="82" height="15" align="center" valign="middle" bgcolor="#FFEEDD" class="dadosRotina" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;"><? echo(F_COD_Convenio($hDados_Pedidos['Pedido'])); ?></td>          <td width="80" height="15" align="center" valign="middle" bgcolor="#FFEEDD" class="dadosRotina" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;"><? echo(formatData2000($hDados_Pedidos['Data'])); ?></td>           <td width="465" height="15" valign="middle" bgcolor="#FFEEDD" class="dadosRotina" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999;"><? echo($hDados_Pedidos['Paciente']); ?></td>        </tr>   <?            // Codigo para Rotina   - Campos: Status, NomeExame, DataInício(Data Cadastro), Previsão(Início + x)            $SQL_Cod= "SELECT exames.Exame, pedidos_master.Data, " .                     "date(pedidos_master.Data + exames.TempoRotina) as Previsao, " .                    "pedidos_detalhes.Lancado, pedidos_detalhes.ASS_Eletronica FROM " .                    "pedidos_master INNER JOIN (exames INNER JOIN pedidos_detalhes ON " .                    "exames.Codigo = pedidos_detalhes.CodExame) ON pedidos_master.Pedido = " .                    "pedidos_detalhes.Pedido WHERE pedidos_master.Pedido = " . $hDados_Pedidos['Pedido'] .                     " ORDER BY exames.Exame;";            $hConsulta_Detalhes = mysql_query($SQL_Cod) or die($xDie);?>        <tr>          <td width="20" height="100%" valign="middle"> </td>          <td height="100%" colspan="4" valign="top" class="dadosRotina">         <table width="660" border="0" align="center" cellspacing="2" cellpadding="1"><?             // Loop para Rotina            $Saida = "";            while ($hDados_Detalhes = mysql_fetch_array($hConsulta_Detalhes))            {?>            <tr>              <td width="65" height="18" align="center" valign="middle" class="<? formataStatus($hDados_Detalhes['Lancado'], $hDados_Detalhes['ASS_Eletronica']); ?>">            <?               // Mostra Status               saidaStatus($hDados_Detalhes['Lancado'], $hDados_Detalhes['ASS_Eletronica']);            ?></td>              <td width="430" height="18" valign="middle"  class="tdItemLaudo"><? echo($hDados_Detalhes['Exame']); ?></td>              <td width="125" height="18" align="left" valign="middle" class="tdItemLaudo">            <?                // Mostra a previsão se ainda não foi digitado               if ($hDados_Detalhes['Lancado'] != "S")                  echo "Previsão: <font color=\"red\">" . formatData2000($hDados_Detalhes['Previsao']) . "</font>";               else if ($hDados_Detalhes['ASS_Eletronica'] == NULL)                  echo "Previsão: <font color=\"red\">" . formatData2000($hDados_Detalhes['Previsao']) . "</font>";               else                  echo "Previsão: <font color=\"red\">---X---</font>";                              //echo ($hDados_Detalhes['Lancado'] != "S"? formatData2000($hDados_Detalhes['Previsao']):" ");            ?></td>            </tr><??>        </tr><?            }?>        </table></td><?         }?></table><?         flush();         ob_flush();      }         ob_end_flush();   }   ?><script language="javascript">function Mostra(src, idHelp){   document.getElementById(src).style.visibility = (idHelp == 0? "hidden" : "visible");//   document.getElementById("Help").style.visibility="hidden";//   document.Help.visibility = (idHelp == 0? hidden:visible);}function apaga(){   document.all["carrega"].innerHTML = '';}</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Coloque isto no inicio do código ;)

 

<script language="javascript">function Mostra(src, idHelp){  document.getElementById(src).style.visibility = (idHelp == 0? "hidden" : "visible");//   document.getElementById("Help").style.visibility="hidden";//   document.Help.visibility = (idHelp == 0? hidden:visible);}function apaga(){  document.all["carrega"].innerHTML = '';}</script>

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.