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

w3schools notes

Question

obtuve una función de javascript en el lado del cliente que se activa con un clic de botón (básicamente, ¡es una calculadora!). A veces, debido a la enorme cantidad de datos en la página, la función de calculadora de JavaScript toma demasiado tiempo y hace que la página parezca inactiva para el usuario. Estaba planeando mostrar una div transparente en toda la página, tal vez con un indicador de ocupado (en el centro) hasta que la función de la calculadora termine, de modo que el usuario espere hasta que el proceso finalice.

function CalculateAmountOnClick() { // Display transparent div // MY time consuming loop! { } // Remove transparent div }

¿Alguna idea sobre cómo hacer esto? ¿Debo asignar una clase css a un div (que rodea el contenido de toda mi página) usando javascript cuando se inicia mi función de calculadora? Intenté eso pero no obtuve los resultados deseados. Estaba enfrentando problemas con la transparencia en IE 6. Además, ¿cómo mostraré un mensaje de carga + imagen en un div tan transparente?

TIA

Answer 1

Javacript 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 );
}
}

Su 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 cortes de subrayado MSIE 6 a archivos condicionalmente incluidos, como desee).

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

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 podrías llamar así:

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

Answer 2

Voy a hacer algunas suposiciones pesadas aquí, pero me parece que lo que está sucediendo es que, debido a que está encerrando directamente el navegador con un procesamiento intenso inmediatamente después de haber configurado el elemento de la 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 sentirse mal si está haciendo algo más y luego dibuja lo que necesita (los navegadores varían su método para esto). Por lo tanto, en este caso, puede refrescar la pantalla solo después de haber quitado la cortina, o ha forzado un redibujado desplazándose.

Una advertencia justa: este tipo de procesamiento intenso no es muy amable de su parte, ya que no solo bloquea su página. Como los navegadores generalmente implementan solo una única secuencia de Javascript para TODAS las pestañas, su procesamiento bloqueará todas las pestañas abiertas (= el navegador). Además, se corre el riesgo de que el tiempo de espera de ejecución y el navegador simplemente detengan su script (esto puede ser de tan solo 5 segundos).

Aquí hay una forma de evitarlo.

Si puede dividir el procesamiento en trozos más pequeños, puede ejecutarlo con un tiempo de espera (para permitir que el navegador respire espacio). 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 bucle while, pero cada iteración del bucle se realiza en un intervalo de tiempo para que el navegador tenga un poco de tiempo para respirar. Sin embargo, ralentizará el procesamiento, y cualquier trabajo posterior deberá pasar a una devolución de llamada ya que el ciclo se ejecuta independientemente de lo que pueda seguir la llamada a processLoop.

Otra variación de esto es configurar la cortina, llamar a su función de procesamiento con un setTimeout para permitir que el navegador abra 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, le recomendamos que consulte una solución preparada para crear cortinas. Esto debería existir para la mayoría de las bibliotecas, aquí hay una para jQuery , y pueden ayudar con el CSS.

Answer 3

Además de todo lo anterior, no olvides poner un iframe invisible detrás de la cuña, para que aparezca arriba de los cuadros de selección en IE.

Editar: este sitio, aunque proporciona una solución a un problema más complejo, cubre la creación de un fondo modal. http://www.codeproject.com/KB/aspnet/ModalDialogV2.aspx

Answer 4

Haría algo así como:

1.unhide a div (pantalla: en línea)

2.hacer la posición: absoluta

3.Dale un índice z: 99

4. hacer la altura y el ancho del 100%

5.cuando el procesamiento está hecho, configure mostrar: ninguno

Para hacerlo transparente, deberá establecer la opacidad que es diferente en ff, es decir, etc.

Para mostrar un ícono de carga, siempre puedes crear un segundo div y colocarlo donde quieras en la página. Cuando termine de cargarse, quítelo junto con el transparente.

Answer 5

Para el mensaje de carga, usaría un <div> con la position:absolute , lo colocaría usando la left y la top , y establecería la pantalla en none .

Cuando quiera mostrar el indicador de carga, tendrá que usar un tiempo de espera de div que no se mostrará hasta que finalice su procesamiento. Entonces, debes modificar tu código a esto:

function showLoadingIncidator()
{
// Display div by setting display to ''inline''
setTimeout(CalculateAmountOnClick,0);
}
function CalculateAmountOnClick()
{
// MY time consuming loop!
{
}
// Remove transparent div
}

Debido a que configura el tiempo de espera, la página se volverá a dibujar antes de que ocurra el ciclo que consume mucho tiempo.