jQuery 防止用户在页面加载时执行任何操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12052819/
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
Prevent user to perform any actions while page is loading
提问by Chinchan Zu
I have a tabbed web application, and I also created caching of the images before page transitions, so when the user goes to a page, I make sure all the images are downloaded before transitioning to that page.
我有一个选项卡式 Web 应用程序，我还在页面转换之前创建了图像缓存，因此当用户转到某个页面时，我确保在转换到该页面之前下载了所有图像。
When I click on a tab with many images, I display a spinner and starts downloading the images in the background then after it finishes I will display the page.
当我单击包含许多图像的选项卡时，我会显示一个微调器并开始在后台下载图像，然后在完成后我将显示该页面。
But I want to freeze any user inputs or taps while I'm doing this. So what is the best method to freeze and unfreeze the whole page?
但是我想在执行此操作时冻结任何用户输入或点击。那么冻结和解冻整个页面的最佳方法是什么？
回答by ygssoni
You can use a predefined jQuery UI called jQuery Block UI
您可以使用名为jQuery Block UI的预定义 jQuery UI
Or simply add a division that will block the body and will fade out when the body is loaded.
或者简单地添加一个会阻塞主体并在加载主体时淡出的分区。
<div id="div">
<h1>Please Wait..</h1>
</div>
jQuery will be:
jQuery 将是：
$(document).ready(function(){
$("#div").fadeOut()
});
Hereis the working Example. The page will be blocked until the image is loaded completely.
这是工作示例。该页面将被阻止，直到图像完全加载。
回答by slobodans
This JQuery code can disable elements on page:
此 JQuery 代码可以禁用页面上的元素：
$("body").find("*").attr("disabled", "disabled");
$("body").find("a").click(function (e) { e.preventDefault(); });
And this JQuery code will make elements enabled again:
此 JQuery 代码将使元素再次启用：
$("body").find("*").removeAttr("disabled");
$("body").find("a").unbind("click");
回答by Red Taz
Covering the interface with a top-level transparent/translucent overlay should block events for elements beneath it.
用顶级透明/半透明覆盖覆盖界面应该阻止其下方元素的事件。
However, you would be taking UI control away from the user by doing this.
但是，这样做会使用户无法控制 UI。
回答by Marco Peca
I use:
我用：
$(window).bind('load', function() {
// code here
});
Until the page is not completely loaded this event is not fired. So, there, you can call a function that unlock your page's elements.
在页面未完全加载之前，不会触发此事件。因此，在那里，您可以调用解锁页面元素的函数。
Enjoy :)
享受 ：）
