Question

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

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

Answer 1

输出正文标记后，您需要立即触发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（）。我不相信你需要瞄准身体，基本上这就是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>

Answer 3

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

Answer 4

你试过这个吗？

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

Answer 5

最终为我工作的完整代码如下：

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

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

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

6 个答案: