阻止 UI 直到页面完全加载：jquery，blockUI 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/806713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Block UI until a page has fully loaded : jquery, blockUI plugin
提问by Seb
How can I block the UI when the page is still loading using jquery and blockUI plugin? If the page was being loaded using an AJAX call I know the workaround, but when the page is loading with a postback, then how to block the ui until the page has finished loading completely?
当页面仍在使用 jquery 和 blockUI 插件加载时，如何阻止 UI？如果页面是使用 AJAX 调用加载的，我知道解决方法，但是当页面加载回发时，如何阻止 ui 直到页面完全加载完成？
Please help. Many thanks in advance for your effort and time.
请帮忙。非常感谢您的努力和时间。
回答by Seb
You'll need to fire the blockUI plugin as soon as the body tag is output.
输出 body 标签后，您需要立即触发 blockUI 插件。
Instead of the traditional:
而不是传统的：
<script type="text/javascript">
$(function (){
$("body").blockUI(options);
});
</script>
You'll need to forget about the enclosing $(function (){})or $(document).ready(function (){})so your script fires immediately:
你需要忘记封闭的$(function (){})或者$(document).ready(function (){})你的脚本立即触发：
<script type="text/javascript">
$("body").blockUI(options);
</script>
回答by Ecropolis
Building on and correcting Seb's answer. If you are blocking the UI use .blockUI() and if targeting an object use .block(). I don't believe you need to target body, essentially that's what the function blockUI does on it's own. You DO need to call the function after the body tag... otherwise there is no <body>tag. If you really want to keep the UI blocked until every image is loaded, see the last line. If you only wanted the page content to load you could put the unblock function at the bottom of your familiar $(document).ready(function().
建立并纠正 Seb 的答案。如果您要阻止 UI，请使用 .blockUI()，如果要定位对象，请使用 .block()。我不相信您需要针对身体，本质上这就是功能块UI 自己所做的。您确实需要在 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>
回答by Kremena Lalova
The complete code that finally worked for me is the following:
最终对我有用的完整代码如下：
$("body").block({ message: '<h2>Loading...</h2>' });
$(document).ready(function () {
$("body").unblock();
});
回答by Gustavo Cardoso
You can try start the page with all components disabled and then enable their on the PageLoad event. Other idea is put a CSS class that hide all the page and change this on the load with JQuery.
您可以尝试在禁用所有组件的情况下启动页面，然后在 PageLoad 事件上启用它们。另一个想法是放置一个隐藏所有页面的 CSS 类，并在使用 JQuery 加载时更改它。
回答by dhinesh
Problem would be in refering the javascript files.
问题在于引用 javascript 文件。
If block UI needs to be added in the ASP.NET Ajax pages try including the javascript files in the ScriptManager.
如果需要在 ASP.NET Ajax 页面中添加块 UI，请尝试在 ScriptManager 中包含 javascript 文件。
回答by Andy Evans
Have you tried this?
你试过这个吗？
<script type="text/javascript">
$(document).ready(function () {
$.blockUI(options);
});
</script>
