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

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

谢谢！

编辑：谢谢大家的反馈。我的代码很长，所以我不想在这里发布它，但它基本上构建了一个复选框树，并且树大约有1000个叶子。因此，它需要挑选被检查的并扩展它们，隐藏未经检查的那些，等等。我知道我可以尝试优化一点，但我想我也很好奇如何做到这一点。所以基本上我没有做任何发布，获取或ajax调用，我可以将解除阻止代码附加到它。大多数语句选择一些节点和添加/删除一些属性，如隐藏，显示等。

我做了一些与yslow分析，似乎加载时间被分解之间的html被解析（约2.5秒）和JavaScript代码（〜2.5）。这让我想，如果在jquery ready函数返回true之前，有一种方法可以在页面加载时触发blockUI。

谢谢大家！

再次感谢大家！

来源

2010-02-23 hsalama

你在跑步需要多长时间？可能有很多优化可以在那里完成 – 2010-02-23 13:12:33

我想这里的人正在猜测你的情况的具体情况。如果您可以详细阐述一些代码，并发布一些代码，说明长时间运行代码的发生时间和方式，以及您如何运行blockUI，这将有所帮助。 *您可以使用更多信息编辑您的问题。* – user113716 2010-02-23 13:22:06

您还可以显示模态对话框的jQuery与消息

来源

2010-02-23 13:10:09 alemjerus

你会想一旦开始了漫长的过程立即显示你的元素，并从回调中隐藏它。所以，举例来说，如果你正在做一个帖子：

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

在这个例子中，hideloading()将不会被调用，直到发送到服务器的较长的过程完成。

来源

2010-02-23 13:15:28 Sampson

在调用正在执行操作的函数之前，需要运行显示加载器的东西，然后一旦此操作完成后停止加载器。例如

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

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

}

您可以设置一个标志来说明动作何时完成，如果您想要使用超时轮询，请对此进行轮询。

来源

2010-02-23 13:16:08 matpol

问题是，如果代码只是一次全部运行，浏览器将无法显示该消息，直到工作全部完成。 – Pointy 2010-02-23 13:17:20

这就是设置一个标志的意思（也许不是很清楚）。如果设置了一个标志，说明操作已完成，您可以检查并隐藏加载程序 – matpol 2010-02-23 13:58:23

正如Nick提到的，让客户端代码咀嚼几秒钟的用户CPU时间似乎非常可怕。这且不说，你可能想要做这样的事情：

显示
建立一个暂停程序在未来开始5毫秒到这么大的计算
在“请稍候”消息结束该超时例程，摆脱“请等待”消息

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

来源

2010-02-23 13:16:18 Pointy

当您启动cruching追加div身体

CSS：

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

之后你完成你的剧本，只是删除或隐藏这个元素

来源

2010-02-23 13:16:38

你在做什么是要带的时间？如果它是一个Ajax调用，the documentation can help：你只需要一个回调函数来隐藏加载消息（参见下面的例子通话中提及的“完整”的功能。）：

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

来源

2010-02-23 13:19:10 Ben

你的问题是，锁定阻止从运行的动画间隔，所以你看到的是排队的动画一旦有一些处理器可用就快速完成。 $.blockUI有onBlock回调，您可以使用这一点，例如：

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

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

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

来源

2010-02-23 13:21:36

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

回答

相关问题