阻止 UI 直到页面完全加载：jquery、blockUI 插件

Question

当页面仍在加载时，如何使用 jquery 和 blockUI 插件来阻止 UI？ 如果使用 AJAX 调用加载页面，我知道解决方法，但是当页面通过回发加载时，如何阻止 ui 直到页面完全加载完毕？

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

Answer 1

输出 body 标签后，您需要立即启动 blockUI 插件。

而不是传统的：

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

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

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

Answer 2

基于并纠正 Seb 的答案。 如果要阻止 UI，请使用 .blockUI()；如果要定位对象，请使用 .block()。 我不认为您需要以 body 为目标，本质上这就是函数 blockUI 本身所做的事情。 您确实需要在 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>

Answer 3

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

Answer 4

问题在于引用 javascript 文件。

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

Answer 5

你试过这个吗？

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

Answer 6

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

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

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