如何在 jQuery 单击事件上显示不透明背景

发布于 2024-10-07 07:33:21 字数 778 浏览 0 评论 0原文

为了在按钮单击失败后执行某些方法时显示不透明背景或动画 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;
}

原文

In order to show an opaque background or animated gif while executing some method after an button click fails to show this. It only runs after all the code has been executed.

Can I do this in jQuery, i.e. on a click event render html changes before and after main code.

The long running method is adding 100-500 divs to the page that takes about 10 seconds to finish.

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

The problem is that the #curtain div never shows, as the complete javascript has to be executed before rendering all the changes.

Style:


#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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沙沙粒小 2024-10-14 07:33:21

这是一种 hack，但如果你使用 setTimeout 它可能会起作用。

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

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

This is kind of a hack, but if you use setTimeout it might work.

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

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

回复收藏 0 原文

飘过的浮云 2024-10-14 07:33:21

网页的 UI 线程中永远不应该有长时间运行的方法。它会使页面看起来被锁定，这对用户来说非常烦人。

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

然后你可以这样做：

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

You should never have long running methods in the UI thread of a webpage. It will make the page appear to lock up and is very annoying for the user.

Instead you should use asynchronous callback. The long running method I assume does some AJAX calls. In which case it should accept a function as an argument (like the jquery "click", "ajax", etc.). Then pass that function to the ajax method as the completion or success callback.

Then you can do:

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

回复收藏 0 原文

~没有更多了~