Javascript: indicador de carga/ocupado o div transparente sobre la página al hacer clic en el evento

Es fundamental entender el código correctamente previamente a aplicarlo a tu proyecto y si ttienes algo que aportar puedes dejarlo en la sección de comentarios.

Solución:

Javascript para mostrar una cortina:

function CalculateAmountOnClick () 
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function() return false; 
  try 
    // your operations
  
  finally 
    curtain.parentNode.removeChild( curtain );
  

Tu CSS:

#curtain 
  position: fixed;
  _position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  _height: expression(document.body.offsetHeight + "px");
  background: url(curtain.png);
  _background: url(curtain.gif);

(Mueva los trucos de subrayado de MSIE 6 a los archivos incluidos condicionalmente según lo desee).

Puede configurar esto como funciones de agregar/eliminar para la cortina, o como un envoltorio:

function modalProcess( callback ) 
  var ret;
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function() return false; 
  try 
    ret = callback();
  
  finally 
    curtain.parentNode.removeChild( curtain );
  
  return ret;

Que luego podrías llamar así:

var result = modalProcess(function()
  // your operations here
);

Voy a hacer algunas suposiciones importantes aquí, pero me parece que lo que está sucediendo es que debido a que está bloqueando directamente el navegador con un procesamiento intenso inmediatamente después de haber configurado el elemento de cortina, el navegador nunca tiene la oportunidad de dibujar el cortina.

El navegador no se vuelve a dibujar cada vez que actualiza el DOM. Puede ser útil ver si está haciendo algo más y luego dibujar lo que se necesita (los navegadores varían su método para esto). Entonces, en este caso, puede estar actualizando la pantalla solo después de que haya quitado la cortina, o haya forzado un redibujado al desplazarse.

Una advertencia justa: este tipo de procesamiento intenso no es muy amable de su parte porque no solo bloquea su página. Debido a que los navegadores generalmente implementan solo un único hilo de Javascript para TODAS las pestañas, su procesamiento bloqueará todas las pestañas abiertas (= el navegador). Además, corre el riesgo de que se agote el tiempo de ejecución y el navegador simplemente detenga su secuencia de comandos (esto puede ser tan bajo como 5 segundos).

Aquí hay una forma de evitar eso.

Si puede dividir su procesamiento en partes más pequeñas, puede ejecutarlo con un tiempo de espera (para permitir que el navegador respire). Algo como esto debería funcionar:

function processLoop( actionFunc, numTimes, doneFunc ) 
  var i = 0;
  var f = function () 
    if (i < numTimes) 
      actionFunc( i++ );  // closure on i
      setTimeout( f, 10 )
     
    else if (doneFunc)  
      doneFunc();
    
  ;
  f();


// add a curtain here
processLoop(function (i)
  // loop code goes in here
  console.log('number: ', i);
, 
10,  // how many times to run loop
function ()
  // things that happen after the processing is done go here
  console.log('done!');
  // remove curtain here
);

Esto es esencialmente un ciclo while, pero cada iteración del ciclo se realiza en un intervalo de tiempo, por lo que el navegador tiene un poco de tiempo para respirar en el medio. Sin embargo, ralentizará el procesamiento, y cualquier trabajo realizado después debe ingresar en una devolución de llamada, ya que el bucle se ejecuta independientemente de lo que pueda seguir a la llamada a processLoop.

Otra variación de esto es configurar la cortina, llamar a su función de procesamiento con setTimeout para permitir que el navegador tenga tiempo de correr la cortina y luego eliminarla una vez que haya terminado.

// add a curtain
var curtain = document.body.appendChild( document.createElement('div') );
curtain.id = "curtain";
curtain.onkeypress = curtain.onclick = function() return false; 
// delay running processing
setTimeout(function()
  try 
    // here we go...
    myHeavyProcessingFunction();
  
  finally 
    // remove the curtain
    curtain.parentNode.removeChild( curtain );
  
, 40);

Si está utilizando una biblioteca js, es posible que desee ver una solución preparada para crear cortinas. Estos deberían existir para la mayoría de las bibliotecas, aquí hay uno para jQuery, y pueden ayudar con el CSS.

Yo haría algo como:

1. mostrar un div (display:inline)
2. hacer el position:absolute
3. dale un z-index:99
4. hacer la altura y el ancho 100%
5. cuando el procesamiento haya terminado, establezca display:none

Para hacerlo transparente tendrás que configurar la opacidad que es diferente en Firefox, IE, etc.

Para mostrar un ícono de carga, siempre puede crear un segundo div y colocarlo donde desee en la página. Cuando termine de cargarse, retírelo junto con el transparente.

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador