JavaScript - загрузка/индикатор занятости или прозрачное отделение по странице при щелчке события

Я собираюсь сделать некоторые тяжелые предположения здесь, но это звучит мне, что происходит, то, что, потому что Вы непосредственно запираете браузер с интенсивной обработкой, сразу настроив элемент занавеса, браузер никогда не имеет шанс потянуть занавес.

Браузер не перерисовывает каждый раз, когда Вы обновляете DOM. Это может woit, чтобы видеть, делаете ли Вы что-то больше и затем тянете то, что необходимо (браузеры варьируются свой метод для этого). Так в этом случае это может обновлять дисплей только после того, как это удалило занавес, или Вы вызвали перерисовку путем прокрутки.

Ярмарка Варинг: Этот вид интенсивной обработки не очень хорош из Вас, потому что это не только запирает Вашу страницу. Поскольку браузеры обычно реализуют только единственный поток 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
});

Это - по существу некоторое время цикл, но каждое повторение цикла сделано в синхронизированном интервале, таким образом, браузер имеет немного времени для дыхания промежуточный. Это замедлит обработку, хотя, и любая работа, сделанная впоследствии, должна войти в обратный вызов, поскольку выполнения цикла независимо от whatwever могут следовать за вызовом к 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.

Я сделал бы что-то как:

1. раскройте отделение (display:inline)
2. сделайте position:absolute
3. дайте ему a z-index:99
4. сделайте высоту и ширину 100%
5. когда обработка сделана набор display:none

Для создания этого прозрачным, необходимо будет установить непрозрачность, которая отличается в Firefox, IE, и т.д.

Для показа загружающегося значка, можно всегда создавать второе отделение и располагать его, где Вы хотите на странице. Когда это сделает загрузку, удалите его наряду с прозрачным.

В дополнение ко всему вышеупомянутому не забывайте помещать невидимый iframe позади контейнера, так, чтобы это обнаружилось выше избранных полей в IE.

Править: Этот сайт, хотя это предоставляет решение более сложной проблемы, действительно включает создание модального фона. http://www.codeproject.com/KB/aspnet/ModalDialogV2.aspx

Для загружающегося сообщения я использовал бы a <div> с position:absolute, расположите его использование left и top, и набор дисплей к none.

Когда Вы хотите показать загружающийся индикатор, Вы оказываетесь перед необходимостью использовать тайм-аут иначе div не отобразится, пока Ваша обработка не сделана. Так, необходимо изменить код к этому:

function showLoadingIndicator()
{
    // Display div by setting display to 'inline'
   setTimeout(CalculateAmountOnClick,0);
}

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

Поскольку Вы устанавливаете тайм-аут, страница перерисует, прежде чем трудоемкий цикл происходит.