Я собираюсь сделать здесь некоторые серьезные предположения, но мне кажется, что происходит то, что, поскольку вы непосредственно блокируете браузер интенсивной обработкой сразу после установки элемента занавеса, у браузера никогда нет шансов нарисовать занавес.
Браузер не перерисовывает каждый раз, когда вы обновляете DOM. Может показаться, что вы делаете что-то еще, а потом рисуете то, что нужно (браузеры меняют свой метод для этого). Таким образом, в этом случае обновление может происходить только после снятия шторки, или вы вызвали перерисовку с помощью прокрутки.
Справедливое отношение: этот вид интенсивной обработки не очень приятен с вашей стороны, потому что он не только блокирует вашу страницу. Поскольку браузеры обычно реализуют только один поток Javascript для ВСЕХ вкладок, ваша обработка заблокирует все открытые вкладки (= браузер). Кроме того, вы рискуете из-за тайм-аута выполнения, и браузер просто останавливает ваш скрипт (это может быть всего 5 секунд).
Вот способ обойти это.
Если вы можете разбить свою обработку на более мелкие куски, вы можете запустить ее с таймаутом (чтобы освободить пространство для браузера). Примерно так должно работать:
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
});
По сути, это цикл while, но каждая итерация цикла выполняется за определенный промежуток времени, поэтому у браузера есть немного времени, чтобы дышать между ними. Тем не менее, это замедлит обработку, и любая работа, выполненная впоследствии, должна перейти в обратный вызов, поскольку цикл выполняется независимо от того, что может последовать за вызовом processLoop.
Другим вариантом этого является установка шторки, вызов функции обработки с помощью setTimeout, чтобы дать браузеру время нарисовать шторку, а затем удаление ее после завершения.
// 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);
Если вы используете js-библиотеку, вы можете посмотреть на готовое решение для создания штор. Они должны существовать для большинства библиотек, здесь есть одна для jQuery , и они могут помочь с CSS.