Как показать непрозрачный фон в событии клика jQuery

Чтобы показать непрозрачный фон или анимированный gif при выполнении какого-либо метода после того, как нажатие кнопки не может показать это. Он запускается только после выполнения всего кода.

Могу ли я сделать это в jQuery, то есть в событии щелчка, отображающем изменения html до и после основного кода.

Долгосрочный метод - это добавление 100-500 блоков на страницу, что занимает около 10 секунд.

$('#button).click(function() {   
    $('#curtain').css('visibility', 'visible');
    longRunningMethod();    
    $('#curtain').css('visibility', 'hidden');  
 });

Проблема в том, что div #curtain никогда не отображается, так как весь javascript должен быть выполнен перед рендерингом всех изменений.

Стиль:


#curtain {
    position: fixed;
    _position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    _height: expression(document.body.offsetHeight + "px");
    background-color: #CCCCCC;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    visibility: hidden;
}

javascript jquery jquery-ui jquery-events jquery-click-event
person mrjohn    schedule 14.12.2010    source источник
comment
Что делает метод длительного выполнения?   -  person tster    schedule 15.12.2010
comment
Ваш вопрос начинается с запутанного продолжения предложения, не могли бы вы перефразировать это? Понятия не имею, о чем вы на самом деле спрашиваете.   -  person Incognito    schedule 15.12.2010

Ответы (2)


arrow_upward
2
arrow_downward

Это своего рода взлом, но если вы используете setTimeout, это может сработать.

$('#button').click(function() {   
    $('#curtain').css('visibility', 'visible');
    setTimeout(doBigJob, 100);
 });

function doBigJob()
{
    longRunningMethod();    
    $('#curtain').css('visibility', 'hidden');
}
person Josh    schedule 14.12.2010

arrow_upward
0
arrow_downward

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

Вместо этого вы должны использовать асинхронный обратный вызов. Предполагаю, что длительный метод выполняет некоторые вызовы AJAX. В этом случае он должен принимать функцию в качестве аргумента (например, jquery «click», «ajax» и т. Д.). Затем передайте эту функцию методу ajax в качестве обратного вызова завершения или успеха.

Тогда вы сможете:

$('#button).click(function() {   
    $('#curtain').css('visibility', 'visible');
    longRunningMethod(function() {$('#curtain').css('visibility', 'hidden');});
 });
person tster    schedule 14.12.2010