Problemas para hacer un loading

[xinxan22]

Buenos días, estoy intentando hacer un loading en javascript que se active al inicio de una función y se desactive al final de la función haciendo una animación con CSS3 usando TRANSITION:

Código HTML:

#id_div{
  background-image: url("../img/fondo_oscurecido.png"); 
  background-repeat: repeat;
  height:100%; 
  left: 0; 
  opacity: 0;
  position: absolute;
  top: 0; 
  width:100%; 
  transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -khtml-transition: all 1.5s ease; 
  z-index: 10000;
}



function una_funcion_cualquiera(){

   loading(true);

     //Aquí va mi código y es donde tengo problemas

   loading(false);

}


function loading(estado){
  
  if(estado==true) $('#id_div').css( { opacity: "1.0" } );
  else $('#id_div').css( { opacity: 0 } );

}

Tengo un pequeño problema y es que no hace correctamente la animación. Es como si se activara y desactivara de forma tan rápida que no se pueda ver.

Si pongo un alert(); en "//Aquí va mi código y es donde tengo problemas"
SI que hace la animación.

Si con el Mozilla Firefoz hago un punto de depuración en "//Aquí va mi código y es donde tengo problemas"
SI que hace la animación.

Pero con un código normal como por ejemplo:

for(i=0;i<10;i++){
a=i+1;
}

NO hace la animación.

Es como si no le diera tiempo para hacer el transition de 1,5 segundos y modificar la opacidad.

Gracias.

Saludos.

[quimfv]

Exactamente es lo que pasa... el tiempo de ejecución de

for(i=0;i<10;i++){
a=i+1;
}

es muy muy pequeño.

Tanto el alert como el punto de depuración detienen la ejecución de javascript esperando una acción del usuario por eso tienes tiempo de ver la "~animación"...

Tu codigo muestra #id_div con opacidad 0.1 mientras se ejecuta el resto del script, si este dura pocos milisegundos dificilmente vas a ver nada....

Supongamos que el script tarda 1 milisegundo....

Primero empieza la transición a opcity 0.1 y luego depues de un milisegundo empieza la transición a opacity 0 con lo que no llegas a ver nada.....

[xinxan22]

Estoy haciendo lo siguiente:

milliseconds=4000; //4 segundos de espera

var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}

en vez del bucle for y la animación sigue sin funcionar.


Como podría hacer para que funcionará la animación?

Gracias.

Saludos

[quimfv]

for (var i = 0; i < 1e7; i++) { ???

No tengo claro que puedas usar notación cientifica ahi... ni si es lo que pretendes....

[xinxan22]

Hola,

si he cogido un ejemplo de Internet para hacer un sleep() de 4 segundos.


http://www.phpied.com/sleep-in-javascript/