Question

为了在按钮点击失败后执行某些方法时显示不透明背景或动画gif。它只在所有代码执行完毕后运行。

我可以在jQuery中执行此操作，即在主代码之前和之后的单击事件渲染html更改。

长时间运行的方法是向页面添加100-500个div，大约需要10秒才能完成。

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

问题是#curtain div从不显示，因为在渲染所有更改之前必须执行完整的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;
}

Answer 1

这是一种破解，但是如果你使用setTimeout它可能会有效。

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

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

Answer 2

您永远不应该在网页的UI线程中使用长时间运行的方法。这将使页面看起来锁定并且对用户来说非常烦人。

相反，您应该使用异步回调。我假设长时间运行的方法做了一些AJAX调用。在这种情况下，它应该接受一个函数作为参数（如jquery“click”，“ajax”等）。然后将该函数作为完成或成功回调传递给ajax方法。

然后你可以这样做：

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

如何在jQuery click事件上显示不透明的背景

2 个答案: