Mostrar una animación mientras se ejecuta codigo.

[Blackbit]

Hola,

Estoy haciendo una pequeña aplicación desde la que consulto unos registros
de un fichero ms access y otras operaciones.

Mi ocurrencia es la siguiente:
Tengo un div oculto que contiene un gif animado, este lo hago visible
antes de la llamada a las funciones de javascript/jQuery que hacen las llamadas
al access y muestran los datos en una tabla y por último oculto el div.

Es como poner el puntero con un reloj pero algo un poco mas vistoso.

El problema es que no consigo ni siquiera verlo. Hay alguna forma de "repintar"
la pantalla. En ms access, en los formularios hay un REPAINT.me.

Alguna sugerencia.

Gracias de antemano.

[Albuss]

Código Javascript:

RequestN = objectXMLHttpRequest.LoadXMLHttpRequest();
 
if(RequestN.readyState != 4) {
> código de tu animacion>
}
 

informacion a cerca de .readyState (ajax) : http://www.w3schools.com/jsref/prop_doc_readystate.asp

Eso, si, aunque tengas que llamar a unos registros de un servidor DB, el tiempo de espera va a ser imperceptible, menos de 100ms.

[madman_18]

Podrías ejecutar ese código dentro de un settimeout..... así muestras el gif durante X segundos que tú quieras y luego se mostrarían los resultados

[emprear]

Con javascript puro

Dado que la imagen debería ser llamada cuando se inicializó open() y no antes, lo correcto es

Código Javascript:

var resultados = document.getElementById("mensaje");
  if(conexion.readyState == 1){
    resultados.innerHTML = "<img src='loader.gif'>;
  } 
 
// luego si, verificamos
//(conexion.readyState == 4)&& (conexion.status==200)
// y hacemos el responseText
 

hay que verificar también el status, ya que un 404 entregaría de todas formas una respuesta.

Con jQuery, es un poco distinto y hay varias formas, por ejemplo

Código Javascript:

$('#loaderAjax')
    .hide()  // oculto por defecto
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
 

Aprovechamos los métodos ajaxStart() y ajaxStop() para mostrar /ocultar

Código:

<img src="ajaxloader.gif" id="loaderAjax" alt="" />

SAludos

[Blackbit]

Gracias por las respuestas, pero...

@Albuss
La aplicacioncilla es en local y uso IE 8 +ActiveX.
El ejemplo que me pones no se por donde cogerlo. Gracias de todos modos.

@madman_18
Lo del settimeout, tampoco funciona como se espera.


Código resumen de lo que hago.

...html...

<div id="Espera" style="visibility: hidden;"><img src="animacion.gif></div>
<div id="opcion N" onclick="EjecutaEsto()">Opcion N.</div>

...html...

En la función EjecutaEsto() hay varias llamadas a otras funciones.

EsperaOn(){ $("#Espera").css('visibility','visible');}

...
leeo los registros del fichero access
...
clono unas lineas de una tabla
...
relleno los datos
...

EsperaOff(){ $("#Espera").css('visibility','hidden');}

y por último muestro el div que contiene la tabla con la info.

Bueno, pues tengo la impresión que IE se "cuelga" hasta que se ha ejecutado todo el codigo javascript/jQuery.

Me falta probar lo de comentado por @emprear.

Gracias por los aportes igualmente.

[Blackbit]

Otra prueba fallida, @emprear.

Pero... he descubierto algo.

En mitad del proceso de clonar las filas de la tabla,
he añadido un alert("Pausa."); y se redibuja perfectamente
la animacion y parte de la info que muestro.

Pero... en el momento que pulso aceptar y continua la ejecución
del codigo restante se "congela" la animación ( mas o menos medio segundo )
y despues desaparece y se muestran el resto de datos.

Pienso que el problema es el I Explorer y no redibujar adecuadamente los
cambios que se producen. Es decir que ejecuta todo y luego lo muestra.

Soy cabezota, asi que, seguire intentandolo.

Gracias a todos.

[emprear]

Iniciado por Blackbit

Otra prueba fallida, @emprear.

Pero... he descubierto algo.

En mitad del proceso de clonar las filas de la tabla,
he añadido un alert("Pausa."); y se redibuja perfectamente
la animacion y parte de la info que muestro.

Pero... en el momento que pulso aceptar y continua la ejecución
del codigo restante se "congela" la animación ( mas o menos medio segundo )
y despues desaparece y se muestran el resto de datos.

Pienso que el problema es el I Explorer y no redibujar adecuadamente los
cambios que se producen. Es decir que ejecuta todo y luego lo muestra.

Soy cabezota, asi que, seguire intentandolo.

Gracias a todos.

Acá el problema es que te estamos explicando como hacer eso via ajax y cosas como ActiveX y access, me sugieren que estás haciendo otra cosa.
Podés pasar el código más en detalle
SAludos

[Blackbit]

Hola @emprear.

He reducido un poco todo con un fichero txt, al que le he metido 500 lineas de texto.
Y para ralentizar un poco mas el proceso. cada vez que leo una linea muestro las anteriores.

La linea gif animada se congela de todas todas.

>>>
<!DOCTYPE html>
<html lang="Castellano">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<script>
function EsperaOn() { $("#Espera").css('visibility','visible'); }

function EsperaOff() { $("#Espera").css('visibility','hidden'); }

function LeerLineaFichero(Linea_Numero,RutaNombreFichero) {
var ContadorLineas=0;
var LineaDeTexto;
var FicheroTxt;
var FicheroObj = new ActiveXObject("Scripting.FileSystemObject");

if (FicheroObj.FileExists(RutaNombreFichero))
{
var FicheroTxt = FicheroObj.OpenTextFile(RutaNombreFichero, 1, true);
while (!FicheroTxt.AtEndOfStream)
{ /* Continuar hasta el final del fichero si es CERO o hasta el numero de linea indicado. */
ContadorLineas++;
LineaDeTexto=FicheroTxt.ReadLine();
if (ContadorLineas==Linea_Numero){ break; }
}
FicheroTxt.Close();
}
else
{
LineaDeTexto="(error::fichero no existe)";
}
return LineaDeTexto;
}

function EjecutaEsto()
{
var str_leida="";
var str_total="";
EsperaOn();
for (x=1; x<500; x++)
{
str_leida=LeerLineaFichero(x,"C:\\ttt\\Ejem.txt");
str_total=str_total+str_leida;
$("#ZonaTrabajo").html(str_total);
}
EsperaOff();
}
</script>
<body style="background-color: rgb(243, 243, 243);">
<div id="ContenedorPrincipal">
<table id="Programa" border="0" cellpadding="1" cellspacing="1" width="1000"><tbody>
<tr>
<td width="200px">
<div id="MenuOpciones" style="height: 375px; background-color: rgb(128, 192, 255); border: 1px solid rgb(0, 128, 255);">
<b><BR>
<div id="OpcionN" style="font-family: Times New Roman,Times,Verdana; font-size: 14px; padding-left: 10px; padding-bottom: 5px; cursor: pointer;" onclick="EjecutaEsto()">Opcion N.</div>
</div>
</td>
<td width="800px">
<div id="ZonaTrabajo" style="height: 375px; background-color: rgb(238, 245, 250); border: 1px solid rgb(0, 128, 255);">
</div>
</td>
</tr>
</tbody></table>
</div>
<div id="Espera" style="visibility: hidden; position: absolute; top: 25%; left: 50%; width=300px; height=150px; margin-top:-75px; margin-left:-150px; padding: 10px; color: rgb(255, 255, 255); background-color: rgb(128, 16, 16); border: 2px solid rgb(0, 0, 0);">
<BR>
<div align="right" width="280px"><b>ESPERE POR FAVOR</b></div>
<BR>
<img src="Espere.gif">
<BR>
</div>
</body>
</html>
>>>

[Blackbit]

Código HTML:

<!DOCTYPE html>
<html lang="Castellano">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    </head>
    <script>
    function EsperaOn() { $("#Espera").css('visibility','visible'); }
    
    function EsperaOff() { $("#Espera").css('visibility','hidden'); }
    
    function LeerLineaFichero(Linea_Numero,RutaNombreFichero) {
        var ContadorLineas=0;
        var LineaDeTexto;
        var FicheroTxt;
        var FicheroObj = new ActiveXObject("Scripting.FileSystemObject");
    
        if (FicheroObj.FileExists(RutaNombreFichero)) 
            {
                var FicheroTxt = FicheroObj.OpenTextFile(RutaNombreFichero, 1, true);
                while (!FicheroTxt.AtEndOfStream)
                    {   /* Continuar hasta el final del fichero si es CERO o hasta el numero de linea indicado. */
                        ContadorLineas++;
                        LineaDeTexto=FicheroTxt.ReadLine();
                        if (ContadorLineas==Linea_Numero){ break; }
                    }
                FicheroTxt.Close();
                } 
            else
                {
                LineaDeTexot="(error::fichero no existe)";
                }
        return LineaDeTexto;
        }
        
    function EjecutaEsto()
    {
    var str_leida="";
    var str_total="";
    EsperaOn();
    for (x=1; x<500; x++)
    {
        str_leida=LeerLineaFichero(x,"C:\\ttt\\Ejem.txt");
        str_total=str_total+str_leida;
        $("#ZonaTrabajo").html(str_total);
    }
    EsperaOff();
    }
    </script>
    <body  style="background-color: rgb(243, 243, 243);">
    <div id="ContenedorPrincipal" class="centrado">
        <table id="Programa" border="0" cellpadding="1" cellspacing="1" width="1000"><tbody>
            <tr>
                <td width="200px">
                    <div id="MenuOpciones" style="height: 375px;  background-color: rgb(128, 192, 255); border: 1px solid rgb(0, 128, 255);">
                        <b><BR>
                        <div id="OpcionN" style="font-family: Times New Roman,Times,Verdana; font-size: 14px; padding-left: 10px; padding-bottom: 5px; cursor: pointer;" onclick="EjecutaEsto()">Opcion N.</div>                    
                    </div>
                </td>
                <td width="800px">
                    <div id="ZonaTrabajo" style="height: 375px; background-color: rgb(238, 245, 250); border: 1px solid rgb(0, 128, 255);">
                    </div>
                </td>
            </tr>
        </tbody></table>
    </div>
    <div id="Espera" style="visibility: hidden; position: absolute; top: 25%; left: 50%; width=300px; height=150px; margin-top:-75px; margin-left:-150px; padding: 10px; color: rgb(255, 255, 255); background-color: rgb(128, 16, 16); border: 2px solid rgb(0, 0, 0);">
        <BR>
        <div align="right" width="280px"><b>ESPERE POR FAVOR</b></div>
        <BR>
        <img src="Espere.gif">
        <BR>
    </div>
    </body>
</html>
 

[emprear]

Como lo suponia, eso de Ajax No tiene nada, estás accediendo al sistema de archivos con new ActiveXObject("Scripting.FileSystemObject");, que solo trabaja en Windows, en local. o con IIS supongo.

Ahora, lo de la animación y lo de la lectura del archivo son 2 cosas distintas, probé tu script y funciona bien, abre el archivo, y "muestra el gif aninado", por lo menos a mi.
Ese congelamiento al que hacés referencia, ya lo he visto en otros casos, pero en este, no.
Subí la script mi server, a ver como la ves
http://foros.emprear.com/ajax/activeX/actX.html , se puede ver en cualquier navegador
Por supuesto, la apertura del archivo no se hace,
Ahora, si el defecto del gif es por la combinación con lo de la lectura del archivo, no sé, como te dije, en local, tambien se muestra bien y abre el archivo, hace ese loop con el texto, etc. Lo que me pregunto es donde pensás correr esa aplicación, solo en local?, en una intranet?
Como el jquery parece funcionar bien, una alternativa es que en lugar de mostrar el gif muestre algun tipo de barra de progreso. Hace poco vimos en otro post algo parecido, el resultado fue esto
http://foros.emprear.com/ajax/ajax_t...imer_ajax.html
y
http://foros.emprear.com/ajax/ajax_t..._ajax_fdw.html

En la primera solo usá el primer boton, que llama a la función iniciar()
Y mirá el código de
http://foros.emprear.com/ajax/ajax_t...a/cargaAjax.js
para ver donde llamo iniciar() y detener(), que equivaldrían de alguna manera a tus

Código:

    function EsperaOn() { $("#Espera").css('visibility','visible'); }
    
    function EsperaOff() { $("#Espera").css('visibility','hidden'); }

Bueno, jugá con los códigos a ver que te resulta llamando iniciar() y detener en distintos puntos de la ejecución de tu script

SAludos

[Blackbit]

Si la apli es "en local" varios equipos acceden a un disco en red/unidad de red.

De momento aparto lo de la animación, ya que el tiempo de respuesta de la bbdd
es muy baja. Pero seguire buscando e informandome.

Gracias a todos.