在页面完全加载之前阻止 UI：jquery，blockUI 插件答案

【问题标题】：Block UI until a page has fully loaded : jquery, blockUI plugin在页面完全加载之前阻止 UI：jquery，blockUI 插件
【发布时间】：2010-10-22 20:17:24
【问题描述】：

当页面仍在使用 jquery 和 blockUI 插件加载时，如何阻止 UI？如果页面是使用 AJAX 调用加载的，我知道解决方法，但是当页面使用回发加载时，如何在页面完全加载完成之前阻止 ui？

请帮忙。非常感谢您的努力和时间。

【问题讨论】：

您想屏蔽所有的用户界面，比如整个页面，还是只是数据输入字段或其他控件。
回发？这是一个错误/错字吗？如果您要回帖，那是不可能的
嘿@Grant 我想阻止表格行。你能帮帮我吗？

标签： jquery blockui

【解决方案1】：

你需要在 body 标签输出后立即触发 blockUI 插件。

而不是传统的：

<script type="text/javascript">
  $(function (){
    $("body").blockUI(options);
  });
</script>

您需要忘记封闭的$(function (){}) 或$(document).ready(function (){})，以便您的脚本立即触发：

<script type="text/javascript">
  $("body").blockUI(options);
</script>

【讨论】：

我正在尝试阻止表格行，但我无法这样做，我的代码：$('#required-tr').block({message: null});它阻止整个页面
正确的方法是block(options)

【解决方案2】：

以 Seb 的回答为基础并更正。如果您要阻止 UI，请使用 .blockUI()，如果针对对象，请使用 .block()。我不相信你需要以身体为目标，本质上这就是功能 blockUI 自己做的事情。您确实需要在 body 标记之后调用该函数...否则没有 <body> 标记。如果您真的想在加载每个图像之前一直阻止 UI，请参阅最后一行。如果你只想加载页面内容，你可以把解锁功能放在你熟悉的$(document).ready(function().的底部

<script type="text/javascript">  
$("body").block(options);   
//--or--  
$.blockUI(options);  
</script>

<script type="text/javascript">   
$(document).ready(function() {  
   $(window).load(function() { $.unblockUI(); }); //load everything including images.  
//--or--  
   $.unblockUI(); //only make sure the document is full loaded, including scripts.  
});  
</script>

【讨论】：

这可行，但一旦页面被解除阻止，就会阻止所有表单元素

【解决方案3】：

您可以尝试在禁用所有组件的情况下启动页面，然后在 PageLoad 事件中启用它们。其他想法是放置一个隐藏所有页面的 CSS 类，并在加载时使用 JQuery 进行更改。

【讨论】：

【解决方案4】：

问题在于引用 javascript 文件。

如果需要在 ASP.NET Ajax 页面中添加块 UI，请尝试在 ScriptManager 中包含 javascript 文件。

【讨论】：

【解决方案5】：

你试过了吗？

<script type="text/javascript">
    $(document).ready(function () {
        $.blockUI(options);
    });
</script>

【讨论】：

【解决方案6】：

最终对我有用的完整代码如下：

$("body").block({ message: '<h2>Loading...</h2>' });

$(document).ready(function () {
     $("body").unblock();
});

【讨论】：