Показывать изображение загрузчика javascript во время выполнения функции

Question

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

Вот пример:

$('#btn').click(function() {
    $('#LoadingImage').show();
    <time consuming function>
    $('#LoadingImage').hide();
});

Как я могу отчетливо показать изображение загрузчика, обновить экран, запустить функцию, скрыть изображение загрузчика?

Answer 1

Хотя то, что у вас есть должно работать, попробуйте сделать это:

$('#btn').click(function() {
    $('#LoadingImage').show();
    setTimeout(function() {
        <time consuming function>
        $('#LoadingImage').hide();
    }, 0);
});

Это исключит стек вызовов события.

Если ЭТО не работает, то опубликуйте более подробную информацию о том, что это за таинственная функция, отнимающая много времени.

Answer 2

По различным причинам JS должен выполняться в главном потоке, что означает, что рисование блокируется, пока выполняется JS - даже многопроцессорные архитектуры, такие как chrome, не могут перекрашивать вкладку, если эта вкладка выполняет JS.

Ваш единственный способ заставить рисование состоять в том, чтобы разделить выполнение вашей функции или переместить функцию в рабочий поток html5 - и они работают только по бета-версиям Firefox и Safari (или, в более общем случае, любым достаточно недавним собственно сборка webkit)