阻止UI直到页面完全加载:jquery,blockUI插件

时间:2009-04-30 12:44:22

标签: jquery blockui

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

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

6 个答案:

答案 0 :(得分:8)

输出正文标记后,您需要立即触发blockUI插件。

而不是传统的:

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

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

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

答案 1 :(得分:4)

建立并纠正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>

答案 2 :(得分:0)

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

答案 3 :(得分:0)

答案 4 :(得分:0)

你试过这个吗?

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

答案 5 :(得分:0)

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

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

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