Question

我是jQuery的新手，我在ready函数中有一段代码需要大约4-5秒才能完成。我想做的是在页面加载时使用blockUI显示“请稍候”消息或其他内容。但是，如果我在ready函数中插入$ .blockUI和$ .unblockUI，它就会立即运行并消失。如果我把它放在外面，它会破坏IE6。有任何想法吗？我不一定需要使用BlockUI插件，其他任何事情都可以。

谢谢！

编辑：谢谢大家的反馈。我的代码很长，所以我不想在这里发布它，但它基本上构建了一个复选框树，树很长约1000叶。因此，选择已检查的并展开它们，隐藏未经检查的那些，依此类推等等。我知道我可以尝试更多地优化它，但我想我也很好奇如何做到这一点。所以基本上我没有做任何post，get或ajax调用，我可以将unblock代码附加到它。大多数语句都是选择一些节点并添加/删除一些属性，如hide，show等。

我用yslow进行了一些分析，似乎加载时间在被解析的html（~2.5秒）和javascript代码（~2.5）之间划分。在jquery ready函数返回true之前，如果有一种方法可以在页面加载时立即触发blockUI，那么这让我想到了。

全部谢谢！

再次感谢大家！

Answer 1

您需要在启动漫长过程后立即显示您的元素，并在回调中隐藏它。所以，例如，如果你正在做一个帖子：

showloading();
$.post("/foo", { id:'bar' }, function(){
  hideloading();
});

在此示例中，在发布到服务器的较长过程完成之前，不会调用hideloading()。

Answer 2

您还可以使用消息

显示模态jQuery对话框

Answer 3

在调用正在执行操作的函数之前，您需要运行显示加载程序的东西，然后在完成此操作后停止加载程序。 e.g。

function startloader(){
//do  loading stuff
}
function stoploader(){
//stop loader stuff
}

function doingstuff(){
 startloader()
//doing stuff
stoploader()

}

您可以设置一个标志来说明操作何时结束，如果您想使用超时，则可以轮询此事。

Answer 4

正如尼克所提到的那样，让客户端代码咀嚼几秒钟的用户CPU时间似乎非常可怕。除此之外，您可能想要做这样的事情：

显示“请稍候”消息
设置一个超时例程，以便将来开始5毫秒来进行大计算
在超时例程结束时，摆脱“请稍候”消息

这样，您就可以让浏览器在工作开始之前显示您的消息。

Answer 5

当您开始攀爬时，将div添加到身体

的CSS：

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: /* some transparent image or rgba */
}

完成脚本后，只需删除或隐藏此元素

即可

Answer 6

你在做什么花时间？如果是Ajax调用，the documentation can help：您只需要一个回调函数（参见下面示例调用中提到的“完整”函数）来隐藏您的加载消息：

.load(url, [data], [complete(responseText, textStatus, XMLHttpRequest)])

Answer 7

你的问题是锁定阻止了动画间隔的运行，所以你看到的是一旦处理器可用，排队的动画会很快完成。 $.blockUI有一个onBlock回调可用于此，例如：

$.blockUI({ message: $("#myBlocker"), onBlock: doWork });

function doWork() {
  //long running operation
  $.unblockUI();
}

这允许在开始工作之前完成初始fadeIn()（在blockUI内部使用）动画。或者，在fadeIn: 0属性中设置$.blockUI()以完全禁用fadeIn。

如何在jQuery代码运行时显示加载消息？

7 个答案: